2.8K
CSS Expandable Search bar Animation
When we click the search button then it shows the behavior of expanding. In this tutorial, I going to make pure CSS expandable search bar animation. Let’s go to create an expandable search bar using HTML and CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Pure CSS Expandable Search bar Animation</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel ="stylesheet" href ="style.css">
</head>
<body>
<form>
<div class ="search-box">
<input type ="text" class ="txt" placeholder ="Search Here...">
<a class ="btn"><i class ="fa fa-search"></i></a>
</div>
</form>
</body>
</html>
CSS
body{
margin:0;
padding:0;
background: #07051a;
}
.search-box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#fff;
height:40px;
border-radius:40px;
padding:10px;
}
.search-box:hover > .txt{
width:300px;
padding:0 6px;
transition: all 1s;
}
.search-box:hover > .btn{
background:#07051a;
}
.btn{
color:#e84118;
float:right;
width:40px;
height:40px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
transition:0.4s;
cursor:pointer;
}
.btn > i{
font-size:30px;
color:#000;
}
.txt{
border:none;
background:none;
outline:none;
float:left;
padding:0;
color:#333;
font-size:16px;
transition:0.4s;
line-height:40px;
width:0px;
font-weight:bold;
}
form:hover .fa{
background: #07051a;
color: white;
}
For More Tutorials Please Click Here
