A dia de hoy los botones son una parte muy importante de nuestra web, tanto para el menu como para los formularios. La diferencia entre una web con diseño mediocre y una web con diseño profesional radica en las imagenes y por ello hay que aprender a usar imagenes en nuestros botones.
Sin menospreciar algunos diseños que sin ningun tipo de imagen consiguen dar un aspecto muy profesional y serio a la web.
Empezamos por un boton de formulario con una imagen dentro:
Para conseguir un boton con una imagen dentro como este solo tenemos que en lugar de poner el boton como un input dentro del formulario, hacerlo como button.
CSS:
button#buscar{
background-color:#FFF;
border:#000 solid 1px;
width:auto;
height:25px;
margin-left:5px;
margin-top:5px;
z-index:-1;
}
HTML:
<button id="buscar"><img src="rutaimagen/mail_find.png" width="15" height="15" />Buscar</button>
Como veis es algo simple y dara un aspecto muy profesional a nuestro diseño.