Botones con brillo sin imágenes
6 de Abril 2009
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
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;}
2 comentarios a “Botones con brillo sin imágenes”
Comentario: #1
doble2fantasia, el Abril 7th, 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.
Comentario: #2
kcmr, el Abril 7th, 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.