Animated Search-Bar by using Pure Html and CSS

arsalan khan

1831

Hello Folks! I'am here another amazing tutorial ???????? of Html and CSS . Today I'am going to show you how you can create animated "Search-Bar" by using Html & CSS. Code is simple and easy to understand????????. I hope you people love it! keep in touch for more stuff ????????

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="search-box">
        <input type="text" class="search-txt" name="" placeholder="Type to search">
        <a class="search-button" href="#">
        <i class="fa fa-search"></i>
        </a>
    </div>

Try it Yourself >>

 body{
    margin: 0;
    padding: 0;
    background: #49208bd0;
}

.search-box{
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #eef1f0;
    height: 40px;
    border-radius: 40px;
    padding: 10px;

}
.search-box:hover>.search-txt{
width: 250px;
padding:4px 8px;


}
.search-button{
    color:#f7f1f0 ;
    float: right;
    width:40px ;
    height:40px ;
    border-radius:50% ;
    background:#2f3640 ;
    display: flex;
    justify-content: center;
   text-decoration:none;

}
.search-txt{
    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0%;
    color: rgb(17, 16, 16);
    font-size: 25px;
    transition: 0.9s;
    line-height: 40px;
    width: 0px;
}
i{
    position: absolute;
    top: 33%;
}

Try it Yourself >>