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:

<button class="btn btn-enviar">Enviar</button>

Aplicaremos también la técnica de sprites (que explicaré un día de estos) para optimizar el tema de imágenes. Si no te suena esta técnica,  viene a ser la unificación de las imágenes para reducir el número de peticiones del servidor y agilizar la carga de imágenes. En nuestro ejemplo crearemos la imagen del botón de la siguiente manera:

Y el CSS para el botón:

button {border:0}
.btn  {text-indent:-9999px;cursor:pointer;}
.btn-enviar {background:transparent url(/img/btn-enviar.gif) no-repeat 0 0;width:76px;height:25px}
.btn-devolver:hover {background-position:0 -25px;}

Observar 4 cosas:

• En el estilo .btn-enviar definimos la imagen del botón como background.
• En este ejemplo nos interesa poner el texto dentro de la imagen (aunque habría que intentar evitar esto y conseguir que el texto sea generado). Para tales casos, observamos que en el estilo .btn he definido un text-indent negativo, para que la palabra Enviar que hemos puesto no se muestre y no se superponga a la imagen de fondo. Hago esto porque interesa mantener la palabra “Enviar” en el código por temas de accesibilidad y de SEO. La técnica del text-indent negativo es una técnica muy usada para las imágenes con texto, para no perder la accesibilidad y las palabras clave. En otro artículo profundizaré más sobre esta técnica.
• Gracias a la técnica de los sprites, nos bastará introducir la línea 3  para crear el efecto rollover.
• Podríamos habernos ahorrado el estilo .btn pero si tenemos en mente el concepto de OOP-CSS (Programación Orientada a Objetos aplicado al CSS), veremos que es mejor definirlo de esta forma, sobretodo si tenemos más botones en la web (que es lo más probable).  También dedicaré especial atención a este concepto en el futuro, porque actualmente es un concepto clave que influye en mi filosofía parar afrontar como Front-End mis proyectos.

Y ya está. Ya hemos definido una imagen como botón, 100% accesible, con rollover y usando solamente CSS.

Bienvenido al mundo con IE6

Si pruebas de aplicar este ejemplo y visualizarlo en IE6, tendrás la “grata” sorpresa de ver que tu botón no aparecerá. Este problema lo causa el text-indent negativo, que no solo desplaza el texto fuera de la parte visible, sino que desplaza el botón entero. Por suerte, hay solución para todo casi todo y hay un IE6 fix para resolver este caso en concreto. Bastará con agregar un display:block al button y habremos solucionado el problema.

.btn  {text-indent:-9999px;cursor:pointer;display:block}

Bueno, espero que mi primer artículo/tutorial explicando una técnica de Front te haya resultado interesante. Es posible que haya mezclado muchos conceptos distintos en un mismo artículo haciendo menos claro el ejemplo. Intentaré hacerlo mejor la siguiente vez.