Para crear un botón en HTML contamos con dos etiquetas:

Ambas son válidas. La segunda de ellas es menos usada (con diferencia) aunque esconde tras de si muchas ventajas al poder anidar en su interior contenido.

Botón tradicional con input

<input type="submit" value="Eliminar" />

Botón + icono con button

<button type="submit"><img src="delete.gif" alt="x" />Eliminar</button>

Nota: En este caso se ha usado un GIF con el mismo color de fondo que el botón. Cuidado con el formato PNG y sus problemas en Internet Explorer.

CSS

button {
	font: 700 1em Tahoma, Arial, Verdana, sans-serif;
	color: #fff; background-color: #59B0E5;
	border: 1px solid #0074a5;
	border-top: 1px solid #004370;
	border-left: 1px solid #004370;
	cursor: pointer;
}

button {
	width: auto; /* ie */
	overflow: visible; /* ie */
	padding: 3px 8px 2px 6px; /* ie */
}

button[type] {
	padding: 4px 8px 4px 6px; /* firefox */
}

Voy a destacar 4 cuestiones de este CSS:

  • El borde usado de un color concreto y complementado con border-top y border-left del mismo color pero más oscuro para dar sensación de relieve al botón.
  • Por razones de usabilidad el uso de la propiedad cursor: pointer para que aparezca el puntero común de los enlaces y aporte más fuerza de clic al elemento.
  • Con las propiedades width: auto; y overflow: visible; solucionamos el problema de los botones con mayor tamaño en Internet Explorer.
  • Si queremos hilar muy fino nos daremos cuenta que el padding difiere según el navegador. Podemos usar el selector button[type] que no es reconocido por IE para definir un padding diferente.

Resultado (imagen de captura)

captura de botones con iconos en diferentes navegadores

Ver demostración.