Bueno acá está:
http://jsbin.com/axoxu4/4
El botón usa esta imagen para los tres estados:
Si vas al botón "Edit in JS Bin" arriba a la derecha podés ver el código y hacer cambios también.
Este es el html:
Código HTML:
Ver original<p><a class="boton" href="#"></a></p> <p><a class="boton" href="#"></a></p> <p><a class="boton" href="#"></a></p>
Este el CSS:
Código CSS:
Ver original/*estilo para el boton*/
.boton{
display:block;
width:100px;
height:50px;
background: url('http://www.freeimagehosting.net/uploads/c3f1b24bbb.jpg') top center no-repeat;
}
/*estilo para el hover*/
.boton:hover{
background-position: center center;
}
/*estilo para la clase activo y para :active*/
.activo{
background-position: bottom center;
}
Acá lo importante: Cuando defino la imagen de fondo, sólo lo hago para el botón al principio, aclarando que su posición debe ser "top center" (la imagen de arriba). Luego, para :hover defino una nueva posición que es "center center" (la del centro) y para el estado activo es "bottom center" (la del fondo).
Y este el código con jQuery:
Código Javascript
:
Ver original<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<script type="text/javascript">
$(document).ready(function(){
//al hacer click en el boton:
$('.boton').click(function(){
//quitar la clase .activo al boton que la tenga:
$('.activo').removeClass('activo');
//agregar la clase .activo al boton al que hicimos click:
$(this).addClass('activo');
});
});
</script>
En este caso definir un estilo para :active no tiene mucho sentido. Adaptar ese código a tus necesidades no
debería ser complicado.