Botones con imagen y con efecto rollover
Posted: Abril 15th, 2009 | Author: Michael | Filed under: Front-End | Tags: css, html, ie6, nivel-medio, oop-css | 1 Comment »Nivel: medio
Para la creación de botones en un proyecto web, lo normal es recomendar la creación de botones con texto generado (mejor mantenimiento, mejor SEO) y que sean flexibles (mejor mantenimiento, accesible). Pero cada proyecto es un mundo y puede ser que en alguno nos veamos forzados a optar por la utilización de imágenes como botones.
Evidentemente, como en casi todo, existen diferentes soluciones a esto. Yo voy a exponer una solución que he aplicado en persona.
Breve intro a la etiqueta HTML: button
Una etiqueta HTML que me gusta mucho es el <button>. Es una etiqueta que lleva mucho tiempo entre nosotros (desde HTML 4.01) pero que hasta hace relativamente poco no lo he empezado a usar en serio en mis proyectos. Antes lo que siempre usaba para los botones de formularios era el típico input:
// antigua forma: input tradicional
<input type="button" value="Enviar" />
// nueva forma: button
<button type="button">Enviar</button>
Ambas formas son equivalentes y correctas, pero la ventaja del button es que es más manejable mediante CSS y permite jugar más con ella. La desventaja que tiene es que no es 100% compatible ya que solo está disponible a partir de HTML 4.01. De todas formas, hoy en día más del 95% de usuarios utiliza navegadores que soportar HTML 4.01 o superior por lo que recomiendo el uso de esta etiqueta.
La imagen y el botón
Lo primero que se me ocurriría hacer es:
<input src="RUTA_IMG" type="image" />
// o con button, que me gusta mas 
<button><img src="RUTA_IMG" alt="" /></button>
Pero como tenemos que aplicar un efecto rollover en el botón, el método más optimizado es usando el CSS y tratar la imagen como imagen de fondo en el botón. Haciendo esto no necesitaremos tirar de javascript, solo necesitaremos el CSS. Por lo tanto prepararemos algo parecido a esto:
