De seguro han visto muchos sitios web con este tipo de botón buscar animado, que generalmente ayudan mucho cuando desarrollamos para smartphones. bueno hoy aprenderemos a realizar dicho boton de una manera muy sencilla, con tan solo html5 y css3, paso a explicarlo a continuación.
<!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="styles.css"> </head> <body> <form action=""> <input type="search" name="nombre" placeholder="Buscar"> </form> </body> </html>
Explicación: declaramos nuestro DOCTYPE tipico de html5, y enlazamos nuestra hoja de estilos styles.css, creamos un formulario con la etiqueta from y dentro de ella crearemos un input de tipo search osea de tipo busqueda, no olvidemos ponerle un name y el placeholder que hara ese texto gris que se situa como ayuda dentro de elemento input.
styles.css
la explicación de este codigo css, la haré directamente con comentarios en las propiedades que hacen posible esta animación.
input[type="search"]{
width: 45px; /*ancho por defecto*/
background: #ededed url('search-icon.png') no-repeat 9px center; /*icono lupa*/
padding: 9px 10px 9px 32px;
border-radius: 15em;
-webkit-transition: all .5s; /* transición de .5seg a todos los elementos para chrome*/
-moz-transition: all .5s; /* transición de .5seg a todos los elementos para mozilla*/
-o-transition: all .5s; /* transición de .5seg a todos los elementos para ophera*/
transition: all .5s; /* transición de .5seg a todos los elementos*/
outline: none; /* ocultar el fucos automático de los input */
}
input[type="search"]:focus{
width: 130px; /*tamaño del boton buscar al hacer click*/
padding-left: 32px; /*espacio entre el icono lupa y el placeholder*/
color: #000;
background-color: #FFF;
}
este es una manera muy fácil de realizar este efecto a nuestro botón de búsqueda, es muy optimo para el responsive web design, por este lado dejaré la de demo y por su puesto la descarga de los archivos su password: antocas.com de este ejemplo, espero les sirva de ayuda en sus próximos proyectos.
