a:hover con background position

Cuando queremos construir anclas para botones o menús, que utilizan imágenes de fondo para sus distintos estados (link, hover, active), una buena idea para desarrollarlas es utilizar una sola imagen, trabajando con el background-position.

Primero, tenemos nuestra imagen, compuesta por los tres estados del botón o menú que construiremos. La idea es que todos los estados tengan la misma medida, para que no se produzcan descalces a la hora de moverlas con el background-position.

imagena.jpg

Luego, construimos el area activa de nuestro botón, la zona del ancla donde es visible sólo la parte que necesitamos, dependiendo del estado en que se encuentra.

HTML
<a href="#" class="miboton" title="ejemplo">ejemplo</a>
CSS
a.miboton{
	display:block;
	width: 100px;
	height: 40px;
	background: url(http://www.midominio.com/miboton.jpg) no-repeat top left;
	}
a.miboton:hover{
	background-position: -100px 0;
}
a.miboton:active{
	background-position: -200px;
}

Así, tenemos nuestro botón con distintos estados, sin la necesidad de llamar a otras imágenes.
Ver ejemplo

3 thoughts on “a:hover con background position”

  1. el codigo tiene errores:
    “a.mibton:hover{
    background-position: -100px 0;
    }”

    deberia ser asi:
    a.miboton:hover{
    background-position: -100px 0;
    }

    y hay un guion de mas en :

    ejemplo

    deberia ser asi

    ejemplo

    wevie caleta xke no me resultaba y era x esos dos detalles fuera de eso es una excelente opcion recomendable

    xau saludos.

    pd: posible respuesta de basilio al darse cuenta que escribi mal: “shueeeeeeeee loco!!! jajajajaja”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>