"hem-barra-busqueda"
Bootstrap 4.1.1 Snippet by PatataSniper

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Awesome Search Box</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> </head> <!-- Coded with love by Mutiullah Samim--> <body> <div class="container h-100"> <div class="d-flex justify-content-center h-100"> <div class="hem-barra-busqueda"> <input class="hem-search-input" type="text" name="" placeholder="Buscar..."> <a href="#" class="hem-search-icon"><i class="fas fa-search"></i></a> </div> </div> </div> </body> </html>
.hem-barra-busqueda{ margin-bottom: auto; margin-top: auto; height: 60px; background-color: goldenrod; border-radius: 30px; padding: 10px; } .hem-search-input{ color: black; border: 0; outline: 0; background: none; width: 0; caret-color:transparent; line-height: 40px; transition: width 0.4s linear; } .hem-barra-busqueda:hover > .hem-search-input{ padding: 0 10px; width: 450px; caret-color:black; transition: width 0.4s linear; } .hem-barra-busqueda:hover > .hem-search-icon{ background: white; color: gold; } .hem-search-icon{ height: 40px; width: 40px; float: right; display: flex; justify-content: center; align-items: center; border-radius: 50%; color:white; }

Related: See More

Vue Paper Dashboard

Questions / Comments:

Congratilations! This is a amazing Search button ( and it´s animated ).

Scar () - 1 year ago - Reply 0

Congratilations! This is a amazing Search button ( and it´s animated ).

Scar () - 1 year ago - Reply 0