Uninstallme

Desarrollo front-end, estándares web, accesibilidad y más

Botones con brillo sin imágenes

Por kcmr, el 6 de abril de 2009 en CSS

Después de ver el “cómo se hizo” de los botones de las aplicaciones de Google (Google Reader, Gmail, Google Docs), y porque me aburría un poco, me he animado a hacer algo parecido manteniendo como objetivo no usar imágenes de fondo.

Demo botones con brillo sin imágenes

Demo botones con brillo sin imágenes

Ventajas:

  • Cargan rapidamente
  • No tenemos que preocuparnos del rollover, las esquinas, etc.
  • Son escalables
  • Son fácilmente personalizables

Inconvenientes:

  • El código no es precísamente lo más limpio del mundo, ya que se utilizan cuatro elementos SPAN anidados dentro del enlace o elemento BUTTON
  • Necesitamos añadir una clase “hover” o similar mediante Javascript al primero de los SPAN anidados, ya que el :hover no funciona en Explorer 6

Antes de añadir el script para Explorer 6, tuve la oportunidad de experimentar lo que parece ser oooootro bug de este navegador. Si presionamos F5 teniendo el cursor sobre un botón, aparecen los estilos para el estado :hover. Curioso.

Demo botones con brillo sin imágenes

El código CSS usado:

Para botones con fuente Tahoma a 11 píxeles:


/* generales boton */
.boton{ text-decoration: none; border: 0; cursor: pointer; }
button.boton{ outline: none; background: none; white-space: nowrap; overflow: visible;}
.boton span.brillo span{ font: bold 1.1em tahoma, arial, sans-serif; color: #fff; display: block; text-align: center; padding: 0 .9090em; min-width: 5.6363em; top: -.5454em; position: relative; }
* html .boton span.brillo span{ width: 5.6363em; white-space: nowrap; }   /* emulacion de la propiedad min-width para Explorer 6 */
.boton span.borde-h{ display: block; float: left; }
.boton span.borde-v{ cursor: pointer; padding: 1px 0 0 1px; position: relative; margin-left: -1px; margin-right: -1px; display: block; float: left;}
.boton span.brillo{ display: block; }

Para un botón de un determinado color, en este caso verde:


/* verde */
.boton-a span.borde-h{ border: 1px solid #718a0a; border-left: 0; border-right: 0; }
.boton-a span.borde-v{ background: #defd0e; border: 1px solid #718a0a;  border-top: 0; border-bottom: 0; }
.boton-a span.brillo{ border-top: 10px solid #b4ce0c; background: #95b60d; }
.boton-a:hover span.borde-h, .boton-a span.hover{ border-color: #526407;}
.boton-a:hover span.borde-v, .boton-a .hover span.borde-v{ background: #c7e30d; border-color: #526407;}
.boton-a:hover span.brillo, .boton-a .hover span.brillo{ border-top-color: #a4bc0b; background: #79940b;}

3 comentarios

  1. Por doble2fantasia, el 7 de abril de 2009

    Muy interesante, Kus, el efecto es realmente impresionante. Supongo que semánticamente no es lo más correcto pero qué importa si la impresión visual es muy buena y no enturbia de ninguna manera la accesibilidad ¿no? Como curiosidad en IE8 (en modo nativo, sin la vista de compatibilidad) el ejemplo del hipervínculo se ve perfecto pero el del “button” pierde los bordes de la izquierda y la derecha. Con la vista de compatibilidad activada se ve perfecto sin embargo.

  2. Por kcmr, el 7 de abril de 2009

    Gracias por el aviso de IE 8, ya está solucionado. La verdad es que estaban ocurriendo más cosas que no deberían pasar, como que el cursor con la mano seguía apareciendo fuera del botón.

  3. Por dayle, el 7 de abril de 2010

    estan chidas las imagenes

Deja tu comentario

Campos obligatorios marcados con asterisco *