CSS Sprites | Efecto "hover" y "active"

Les traigo un tutorial acerca de CSS Sprites, y como darle a una imagen, ejemplo un botón, el efecto "hover" y "active".
Tutorial hecho por mí. SI no lee atentamente, es muy probable que no comprenda bien el procedimiento.




¿QUÉ ES Y PARA QUE SIRVE EL EFECTO "HOVER" Y "ACTIVE"?

El efecto "hover" consiste que al pasar el cursor por una imagen, esta cambie automáticamente por otra, y el efecto "active" que al presionar dicha imagen, también cambie, entonces dan a entender que es una imagen presionable. Les dejo aquí una pequeña vista previa en mala calidad.

VISTA PREVIA ONLINE

Para este efecto, hay que crear tres botones, los cuáles deben estar todos en una sola imagen, y para ello, utilizaremos CSS-Sprites Generator, que nos facilitará la tarea.


REALIZAR LAS IMÁGENES

Tienen que hacer las imágenes, yo en este caso hice las siguientes.

Botón:


Botón hover:


Botón active:



CSS-SPRITES

1º- Ahora deberán entrar a CSS Sprites:
URL | http://csssprites.com/

2º- Presionan "Examiar", ingresan las imágenes que utilizarán en el orden "Botón", "Hover", "Active" y presionan el botón "Generate".



3º- Una vez hecho, presionan el botón que dice "Donwload Sprite .PNG"



4º- Tendrán la siguiente imagen:





CÓDIGO CSS

Ya estamos cerca del final, ahora le tendremos que dar forma a la imagen, con el siguiente código, lo deben pegar el siguiente código entre las etiquetas <style> y </style>. Lo rojo se edita, en donde deberán colocar la url de la imagen que les generó CSS Sprites. Por ejemplo:
http://csssprites.com/results/1097aa959c77c164ecc9b37c6c2a3b64/result.png

También peguen este código, el cuál más adelante, entenderán porque.

Ahora pegarán el siguiente código de la misma manera que lo hicieron con el anterior.

link = La imagen que se muestra.
hover = La imagen al pasar el cursor.
active = La imagen al presionar sobre ella.

Se preguntarán, que significa "top", "center", "bottom", es algo muy lógico de entender, si vieron la imagen que les generó anteriormente CSS Sprites, verán que están ubicadas de la forma vertical, por lo tanto:



Botón = top/arriba
Hover = center/centro
Active = bottom/abajo


CÓDIGO HTML

Listo, el tutorial está llegando a su fin, solo deben ahora pegar el siguiente código donde quieren ustedes que aparezca la imagen presional.

Como algunos vieron, en el código se pueden ingresar un pequeño texto, es porque siempre es recomendable introducir algo para los buscadores, de todas maneras el texto no va aparecer, ya que anteriormente colocamos el siguiente código:

El tutorial llegó a su fin, y le debería quedar lo siguiente.


VISTA PREVIA ONLINE

Una aclaración: sí alguien encuentra algún error en el tutorial, que me avise ya que lo hice rápido, ya que me estaban presionando ¬¬.

------
¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui