Search button using bootstrap

Search Button Using Bootstrap

Search form created using HTML/CSS. We can use animation effects by using css code.
Bootstrap search is a component which enables the user to find words, sentences, and numbers in a collection of documents, web pages
<input class=”search_input” type=”text” name=”” placeholder=”Search…”>.

HTML

<div class="searchbar">
<input class="search_input" type="text" name="" placeholder="Search...">
<a href="#" class="search_icon"><i class="fa fa-search"></i></a>
</div>

CSS

.searchbar{
margin-bottom: auto;
margin-top: auto;
height: 60px;
background-color: #353b48;
border-radius: 30px;
padding: 10px;
}
.search_input{
color: white;
border: 0;
outline: 0;
background: none;
width: 0;
caret-color:transparent;
line-height: 40px;
transition: width 0.4s linear;
}
.searchbar:hover > .search_input{
padding: 0 10px;
width: 450px;
caret-color:red;
transition: width 0.4s linear;
}
.searchbar:hover > .search_icon{
background: white;
color: #e74c3c;
}
.search_icon{
height: 40px;
width: 40px;
float: right;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
color:white;
}