estimado, la mejor solución para ello, es que utilices UNA SOLA IMAGEN para todos los efectos.
Ejemplo:
el boton mide 20x20 (px), para ello creas una imagen de 40x20 (px) que mantenga ambos eventos.
Para ponerlo en ejecución pones:
Cita: <style>
#boton{
display:block; /* PARA QUE USE TODO EL TAMAÑO QUE LE ASIGNASTE AL DIV */
width:20px; /* ANCHO DEL BOTON */
height:20px; /* ALTO DEL BOTON */
background-image: url(imagen.png); /* LINK DE TU IMAGEN D E 40X20 (px) */
background-repeat: no-repeat; /* PARA QUE NO SE REPITA EN NINGUN LUGAR DEL DIV */
background-position: 0px 0px; /* LUGAR INICIAL, EN ESTE CASO, 0px ARRIBA Y A LA IZQUIERDA */
background-attachment: scroll; /* PARA QUE SIEMPRE SEA LA MISMA POSITION */
overflow:visible; /* PARA QUE TE MUESTRE TODO EL BOTON */
cursor:pointer; /* PARA QUE EL MOUSE SE PONGA DE SELECCIÓN */
}
#boton:hover{
background-position:20px 0px;
}
</style>
<html>
<div id="boton">
<a href="http://www.google.cl"> </a> <!--   es un espacio vacío, es como apretar espacio -->
</div>
</html>
Ante cualquier duda o consulta, me avisas y te aclaro las dudas :P