Estilos de botones crossbrowser

Una de las cosas más difíciles que me toca al armar un sitio, son los formularios. Hacer que queden alineados correctamente, y en todos los browsers, es algo que a ratos me complica. Al terminarlos, está un pequeño botón que gatilla el envío del mismo. Este simple botón también suele ser un dolor de cabeza, ya que darle un estilo al <input> no es correctamente interpretado por todos los browsers. Me topé con este problema hace un tiempo, y encontré la siguiente solución. Por supuesto, la comparto por si más de alguien tiene el mismo inconveniente.


Boton Aqua de Safari

Lo que sucede es que Safari (mi browser favorito) no despliega estilos para <input>; simplemente los ignora. Muestra en vez, su estiloso pero no compatible con mi diseño aqua button. Lo que quiero es tener mi botón, no otro. Así que la solución es reemplazar <input> por <button>, una etiqueta de botón muy antigua, pero no obsoleta, la que sí permite albergar imagen de fondo, color, margen, borde, etc. Como es una etiqueta algo antigua, requiere de cierre, tal como un link:

SafariFirefoxInternet Explorer 7OperaCaminoFlock
<button>Presióname</button>

y el CSS para hacerlo más bonito:

button {
     padding: 0;
     margin: 0;
     border: 0;
     background: url(button_fondo.gif) left top no-repeat;
     width: 110px;
     height: 40px;
     color: #FFF;
     font-size: 14px;
     font-weight: bolder;
     font-family: Georgia, "Times New Roman", Times, serif;
     text-shadow: #333 1px 1px 3px;
     text-align: center;
     cursor: pointer;
}

Despliegue en otros browsers

Como verán, funciona igual que cualquier otro elemento, al que le damos el estilo que queramos. Importante recalcar 2 líneas: <button> tiene por defecto borde con volumen, así que si no lo necesitamos es mejor poner border: 0. Lo segundo, agregarle el cursor de mano al posar el mouse encima del botón con cursor: pointer. Listo… pero surge un pequeño gran inconveniete: Safari y Opera no muestran nuestro texto centrado verticalmente. Firefox, Camino, Flock, IE, según mis pruebas, lo muestran perfecto. Si agregamos un padding-top de 10px se muestra bien, pero en los otros no. ¿Qué ∞¢“÷®? ¿Debería de importarme? Quizás sí, teniendo en cuenta que ambos browsers pasan el test Acid2. Bueno, no quiero complicarme más. La solución radica en agregar el texto del botón en la misma imagen de fondo, y através del método Phark, ocultar el título del botón:

button {
     padding: 0;
     margin: 0;
     border: 0; /*no quiero borde*/
     background: url(button_fondo2.gif) left top no-repeat;
     width: 110px;
     height: 40px;
     cursor: pointer; /*muestrame el cursor de mano*/
     text-indent: -999px; /*manda el texto leeeeejos*/
     overflow: hidden; /*esconde cualquier trazo del mismo*/
}

Ver resultado final

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

  1. buen post. grax!

    dragonBol
    23 / Abril / 2007

  2. Adicionalmente podrías jugar un poco con DOM y Javascript para lograr el efecto de un botón presionado al dar click en el enlace….
    por cierto, buen sitio.

    Buzu
    25 / Abril / 2007

  3. Hola soy de Perú
    Tienes muy buen diseño, es flexible y fresco, gracias por los ejemplos

    Alejandro Talancha Esquives
    30 / Abril / 2007

  4. Ese era un problema que no había podido arreglar con Safari.

    Carlos Magaña
    06 / Junio / 2007

  5. hay mas ejemplos ??

    TAZ
    06 / Julio / 2007

  6. Buen post, pero yo aun sigo con el mismo problema ya que requiero hacerlo con un , alguien tiene alguna idea ya que safari es muy estricto.

    cat
    11 / Julio / 2007

  7. Por extrañas razones en IE no me sirve esta etiqueta sin colocarle el atributo de submit el cual quedaria asi: Enviar,
    tambien tiene “reset”.
    Saludos.

    Arcadio
    14 / Agosto / 2007

  8. Interesante post, yo siempre uso esta etiqueta para mis botones y reemplazo el texto como imagen.
    Saludos desde Perú

    josdelaranda
    15 / Diciembre / 2007

  9. No lo entiendo.

    Hola, sobre el articulo que tienes en:

    http://www.csslab.cl/2006/09/25/image-replacement-o-como-reemplazar-contenido-por-imagen/

    Si te fijas en mi website: http://www.luisvalino.com, como puedo hacer para reemplazar los botones Enviar y Actualizar por 2 imágenes pero que hagan al mismo tiempo las funciones de Enviar y Actualizar ??.
    Gracias.

    Luis Valiño
    19 / Febrero / 2008

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 1 veces