Front-end, Estándares web y Accesibilidad

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

• INPUT
• BUTTON

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)

Ver demostración.