The search bar connects people with websites, mobile apps, and the world. It’s a conversation window between the user and the app or website. In the face of complicated web content, users express their needs by searching keywords, expecting to obtain accurate information and quick and smooth user experience.
A well-designed search bar can improve conversion rates and enhance user experience. In spite of its importance, the search bar is a simple element on a website or app and can very easily get ignored.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Search box</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="box">
<input type="text" name="" class="search-box" placeholder="Search Here">
<a href="#" class="btn"><i class="fa fa-search"></i></a>
</div>
</body>
</html>
css
body{
margin: 0;
padding: 0;
background: #08355c;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #3da0d0;
height: 40px;
border-radius: 35px;
padding: 10px;
}
.search-box{
border:none;
background:none;
outline: none;
float: left;
padding: 0;
font-size: 20px;
color: white;
line-height: 40px;
width: 240px;
transition: 0.7s;
}
.btn{
color: white;
float: right;
width: 40px;
height: 40px;
border-radius: 35px;
background:black;
display: flex;
align-items: center;
justify-content: center;
}
Watch Videos
Reviewed by easycoding
on
August 17, 2020
Rating:
No comments: