CSS para crear botones con sprites

0 - , , - 08/08/2009 07:50:36

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.

a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}

a:hover {
	background-position: 0 -30px;
}

Deja tu comentario

  • El comentario debe estar relacionado con el contenido de la entrada.
  • Comentarios ofensivos, con spam o con lenguaje inapropiado serán eliminados.

captcha