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; }