CSS - Botones con brillo sin imágenes

[sasuke.17]

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

El código CSS usado:

Código PHP:


/* 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:

Código PHP:

/* 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;} 


[Felina05]