CSS para crear botones con sprites

Tener un botón o enlace con una imagen de fondo es bastante normal, y hoy en día, utilizamos efectos para seguir mejorando la experiencia del usuario. Uno de ellos es ofrecer un indicador al usuario para que sepa que se cierne sobre un botón. El denominado efecto "hover". Con el uso de un sprite, podemos crear este efecto modificando la posición de la imagen de fondo hasta una cierta altura para mostrar el fondo del botón en estado "hover". Una técnica simple pero eficaz y que puede ser de gran utilidad a la hora de reducir las peticiones HTTP.

1. a {  
2. display: block;  
3. background: url(sprite.png) no-repeat;  
4. height: 30px;  
5. width: 250px;  
6. }  
7.   
8. a:hover {  
9.     background-position: 0 -30px;  
10. }