Usando gradientes en los enlaces

Mucho se habla del CSS3 y claro, ¡cómo no hacerlo! Decenas de entradas muestran detalles, ejemplos de aplicación y, por lo general aclaran: estro no funcionará en IE etc etc etc.

Es verdad pero, hay ciertas cosas que sí funcionarán y para ser justos, habría que decir que en realidad, hay ciertas cosas que ya existían en Internet Explorer, desde su versión 5.5 y que recién ahora, los otros navegadores están incorporando. Obviamente, no se trata más que de alguna clase de casualidad pero, bienvenida sea ya que, con las limitaciones del caso, podemos aprovecharnos de ellas.

Ese es el caso de las gradientes, una forma excelente de usar el CSS para generar degradados y reemplazar el uso de ciertas imágenes.

Las gradientes pueden ser utilizadas en la mayoría de los navegadores y entre otras cosas, nos permiten generar botones de aspectos "sofisticados". Vamos a los ejemplos más sencillos donde la clave está en el uso de estas tres propiedades:

-moz-linear-gradient(); en Firefox
-webkit-gradient(); en Safari y Chrome
DXImageTransform.Microsoft.Gradient(); en Internet Explorer

Cada navegador tiene su regla y en este caso, son muy diferentes así que vamos a hacerlo de la manera más sencilla posible para que no haya diferencias. En IE, como se trata de un filtro que ya tiene muchos años de existencia, las posibilidades son menores así que nos basamos en ese modelo y creamos un botón, por ejemplo:

<a href="#" class="boton">mi botón</a>

mi botón

.boton {
    color: #FFF;
    display: block;
    font-family: Tahoma;
    font-size: 40px;
    height: 50px;
    line-height: 50px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 300px;
}

No se ve nada más que el texto así que vamos a ponerle un fondo usando gradientes y hacer que cambie al poner el cursor del ratón encima:

<a href="#" class="boton demo1">mi botón</a>

mi botón

.demo1{
  background-image: -moz-linear-gradient(100% 100%  90deg, #222222, #BBBBBB);
  background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,from(#222222), to(#BBBBBB));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#BBBBBB', EndColorStr='#222222');
}
.demo1:hover{
  background-image: -moz-linear-gradient(100% 100%  90deg, #222222, #DDDDDD);
  background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,from(#222222), to(#DDDDDD));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#DDDDDD', EndColorStr='#222222');
}

En los tres casos, la gradiente es horizontal (en IE sólo hay dos tipos disponibles) y los valores hexadecimales indican los colores desde #222222 (el color más oscuro) hasta #BBBBBB (el color más claro) y lo que hacemos en el efecto hover es que ese color final sea aún más claro lo que lo "ilumina".

Ahora, lo mismo pero con otros colores:

<a href="#" class="boton demo2">mi botón</a>

mi botón

.demo2 {
  background-image: -moz-linear-gradient(100% 100%  90deg, #220000, #FF0000);
  background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,from(#220000), to(#FF0000));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF0000', EndColorStr='#220000');
}
.demo2:hover {
  background-image: -moz-linear-gradient(100% 100%  90deg, #220000, #FF8800);
  background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,from(#220000), to(#FF8800));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF8800', EndColorStr='#220000');
}

Y algo similar pero con una gradiente en el otro sentido:

<a href="#" class="boton demo3">mi botón</a>

mi botón

.demo3 {
  background-image: -moz-linear-gradient(100% 100%  135deg, #FF3300, #FFFF00);
  background-image: -webkit-gradient(linear, 100% 100%, 0% 0%,from(#FF3300), to(#FFFF00));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FFFF00', EndColorStr='#FF3300');
}
.demo3:hover {
  background-image: -moz-linear-gradient(100% 100%  135deg, #FFFF00, #FF3300);
  background-image: -webkit-gradient(linear, 100% 100%, 0% 0%,from(#FFFF00), to(#FF3300));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FF3300', EndColorStr='#FFFF00');color:#000 !important;
  color: #000;
}