Search bar like google in HTML and CSS

How to Create a Search Bar Like Google :

Example :

    

Click on Search icon (top right corner) to get a demo.

HTML

<img class="searchlogo" src="https://4.bp.blogspot.com/-O2B-jjzV-z8/X_FXqx9JzYI/AAAAAAAACpg/EtckkoWszXImvdwmHqQEaNk-otuHIeuFgCK4BGAYYCw/s1600/logo.png" width="70%"/> <br/> <div class="searchpage1"> <form action='/search' method='get' role='search'> <div class="searchstyle"> <img class="searchicon" src="https://iconarchive.com/download/i12388/gakuseisean/ivista-2/Start-Menu-Search.ico" width="20px"/> <input class="searchbox1" name='q' placeholder='Search Here...' spellcheck='false' type='text'/> </div> <br/> <div class="sbtn"> <input type='submit' class="searchbtn" value='Plus Search'/> <button onclick="window.open('')" class="searchbtn">I'm Feeling Lucky</button> </div> </form> </div>

CSS

.searchpage1 { background: white; } .searchstyle:hover { box-shadow: 2px 1px 1px #999999, -2px -3px 3px #f0f0f0; border-radius: 30px; } .searchbox1 { padding: 8px; width: 80%; border: none; } .searchstyle { border: 1px solid gray; padding:8px; border-radius: 30px; } .searchicon { vertical-align: middle; } .searchlogo { display: block; margin-left: auto; margin-right: auto; width: 60%; } .searchbtn { background: #f0f0f0; border: none; padding: 8px; border-radius: 4px; } .searchbtn:hover { border: 1px solid #dbdbdb; } .sbtn { text-align: center; }