Animated search bar
Let's get create a simple animated search bar whenever user click on the search bar the search will be expand and release after search this is very simple and full of logics to attract viewer and captured.
.png)
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- this is font awesome link for add icon only -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- add stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Search bar</h2>
<p>Create and design responsive search bar</p>
<form class="search" action="#">
<input type="text" placeholder="type to search something...." name="search" required>
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
text-align: center;
font-size: 20px;
font-weight: bold;
}
form.search input[type=text] {
padding: 8px;
font-size: 15px;
border: 1px solid gray;
float: left;
width: 80%;
background: whitesmoke;
margin-left: 20px;
border-radius: 10px 0 0 10px;
}
form.search button {
float: left;
width: 15%;
padding: 17px;
font-size: 17px;
border: 1px solid rgb(61, 61, 61);
background-color: rgb(116, 116, 212);
border-left: none;
cursor: pointer;
border-radius: 0 8px 8px 0;
color: white;
}
form.search button:hover {
background: rgb(228, 17, 228);
}
form.search::after {
content: '';
clear: both;
display: table;
}
Watch video
Comments
Post a Comment