Botones con imagenes en CSS

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:

Boton formulario con imagen
Boton formulario con imagen

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.

Deja un comentario