Table of Contents
Google Search Bar Clone | Search Bar Html Css – Codewithrandom
Welcome🎉 to Code With Random blog. In this blog, we learn how to create a Google Search Bar Clone. We use HTML & CSS for Google Search Bar Clone. Hope you enjoy our blog so let’s start with a basic HTML structure for the Google Search Bar Clone.
HTML code
<!DOCTYPE html>
<html>
<center>
<header>
<ul>
<li><a class="links" href="#user"><button class="signbutton" type="button">Sign in</button></a></li>
<li><a href="#grid"><img class="grid" src="https://cdn3.iconfinder.com/data/icons/navigation-and-settings/24/Material_icons-01-11-512.png" title="Google apps"></a></li>
<li><a href="#images">Images</a></li>
<li><a href="#gmail">Gmail</a></li>
</ul>
</header>
<div class="logo">
<img alt="Google" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
<div class="bar">
<input class="searchbar" type="text" title="Search">
<a href="#"> <img class="voice" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png" title="Search by Voice"></a>
</div>
<div class="buttons">
<button class="button" type="button">Google Search</button>
<button class="button" type="button">I'm Feeling Lucky</button>
</div>
</body>
There is all HTML code for the Google Search Bar Clone. Now, you can see output without CSS, then we write CSS for the Google Search Bar Clone.
ul {
list-style-type: none;
overflow: hidden;
}
li {
float: right;
}
li a {
color: #000;
display: block;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-size:14px;
}
li a:hover {
text-decoration: underline;
}
.grid{
height:23px;
position:relative;
bottom:4px;
}
.signbutton{
background-color: #4885ed;
color: #fff;
border:none;
border-radius:3px;
padding:7px 10px;
position:relative;
bottom:7px;
font-weight:bold;
}
.logo{
margin-top:200px;
margin-bottom:20px;
}
.bar{
margin:0 auto;
width:575px;
border-radius:30px;
border:1px solid #dcdcdc;
}
.bar:hover{
box-shadow: 1px 1px 8px 1px #dcdcdc;
}
.bar:focus-within{
box-shadow: 1px 1px 8px 1px #dcdcdc;
outline:none;
}
.searchbar{
height:45px;
border:none;
width:500px;
font-size:16px;
outline: none;
}
.voice{
height:20px;
position:relative;
top:5px;
left:10px;
}
.buttons{
margin-top:30px;
}
.button{
background-color: #f5f5f5;
border:none;
color:#707070;
font-size:15px;
padding: 10px 20px;
margin:5px;
border-radius:4px;
outline:none;
}
.button:hover{
border: 1px solid #c8c8c8;
padding: 9px 19px;
color:#808080;
}
.button:focus{
border:1px solid #4885ed;
padding: 9px 19px;
}