Search Button CSS / Código de buscador con efecto hover con css html y js
By Aritzvelaz
<aside class="search-button">
<div class="container">
<span class="lupa">
<i class="fa fa-search"></i>
</span>
<input type="search" id="search" placeholder="¿Qué quieres buscar?" />
</div>
</aside>
CSS
body{background:#424242}
.search-button{width:400px;height:50px;margin:150px auto}
.container{width:400px;position:relative}
.container .lupa{position:absolute;margin-left:28px;margin-top:27px;color:#FFF;-webkit-transition:.3s ease-out;transition:.3s ease-out}
#search{width:70px;height:70px;background-color:#335D6B;color:#FFF;border:none;font-size:.9em;float:left;padding-left:70px;-webkit-transition:.6s ease-out;transition:.6s ease-out}
#search:active,#search:focus{outline:0;width:400px;padding-right:20px}
.container:hover #search{width:400px;background-color:#3299BB}
.container:hover .lupa{color:#424242}
::-webkit-input-placeholder{color:#CCC}
:-moz-placeholder{color:#CCC}
::-moz-placeholder{color:#CCC}
:-ms-input-placeholder{color:#CCC}
https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css