Estilos de botones crossbrowser

23/abr/2007 12

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

Comentarios

  1. dragonBol [#]

    buen post. grax!

  2. Buzu [#]

    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.

  3. CSSLab Admin [#]

    Hola Buzu, bueno con simple CSS puedes hacer lo q quieres, con la pseudoclase a:active (q corresponde al click del mouse sobre un link). si usas el metodo de rapido rollovers q escribi hace un monton, mejor aun. Saludos.

  4. Alejandro Talancha Esquives [#]

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

  5. Carlos Magaña [#]

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

  6. TAZ [#]

    hay mas ejemplos ??

  7. cat [#]

    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.

  8. CSSLab Admin [#]

    cat, porq no puedes usar button? te permite las mismas prestaciones q input

  9. Arcadio [#]

    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.

  10. josdelaranda [#]

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

  11. Luis Valiño [#]

    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.

  12. CSSLab Admin [#]

    Hola Luis: este articulo es el ideal para ti. Dale una segunda leida y mira bien los ejemplos aver si te resulta.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab