Un rollover diferente

Los efectos rollover nos permiten cambiar el formato de un vínculo cuando pasamos el cursor del ratón sobre ellos son muy conocidos:

Un efecto sobre un vínculo

Normalmente, se modifica el color, la fuente, se agregan o eliminan subrayados pero, sin embargo, las posibilidades no se agotan ahí ¿qué pasa si al efecto le agregamos una imagen?

Blogger

Google

Vagabundia

Hacerlo es bastante simple, sólo necesitamos crear un GIF animado, en este caso, unos pocos frames de colores planos:

y luego, simplemente creamos una clase CSS que agregamos a la hoja de estilo, por ejemplo:

a.colores {
  text-decoration: none;
  font-weight: bold;
  font-family: Georgia;
}

a.colores:link, a.colores:visited {
  text-decoration:none;
  font-size:26px;
  color:#FF0000;
  background-image: none;
}

a.colores:active, a.colores:hover {
  background-image:url('URL_imagen');
  color:#FF9933;
}

Que utilizaremos de la siguiente manera:

<a class="colores" href="URL">Vínculo</a>