Blog what I write

Button y img, botón de formulario con icono

post - - 7 replies -

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.

  • Karlota

    ¡¡Magnífico!!, tengo que pasarme más por tu blog, se aprende mucho, este artículo me ha venido muy bien, ya había olvidado lo del button y el input, y las posibilidades que tienen.

    • Sigues por estos derroteros Karlota?. Me alegro que te sirva 😉

  • Es un buen método. De todas formas soy amigo de “complicarme” un pelín más y utilizar el método botón. Esto me permite crear mejores efectos aplicando una imagen de fondo a cada tag.

    Un saludo y enhorabuena por el blog, ya tienes un nuevo seguidor 😉

  • Gracias cmacias, aunque últimamente escribo poquito 🙁

  • Así me dará tiempo a ponerme al día 😉

  • Gracias por la ayuda, hay que pasarse más veces por este blog. Genial !!!!!

  • David Perez

    Gracias amigo por tu ayuda de este blog… fue de gran utilidad …