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.
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 comentarios en “a:hover con background position”
1
karin
12/12/2007 | 11:05 amputa wn!! yo habia visto este post hace rato y sabia que en algun momento lo iba a usar, ahora varios meses despues lo hare vale deberias volver a subir infos asi
shueeeee!!!
xauuuu saludos
2
karin
12/12/2007 | 11:41 amel 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 :
deberia ser asi
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”
3
karin
12/12/2007 | 11:43 amel guion de mas era en el html:
“a href=”#” class=”mi-boton” title=”ejemplo”>ejemplo” que recien no se anoto bn
