CSS+No se ve la imagen sobre un background con efecto hover

[emprear]

A ver si entiendo,

un botón con efecto hover, el botón ademas de una imágen de fondo contiene un texto, y el texto no cambia, solo el fondo... si es asi?
Que papel cumple tu

Código HTML:

<img src="images/ES_shorcuts_web_cards.png" width="310" height="161">
 

dentro del div?

según lo que entiendo necesitas algo asi

Código HTML:

<div class="boton">
titulo boton
</div>
 

Código CSS:

div.boton{
width: 150px;
height: 50px;
line-height: 50px;
vertical-align: middle;
text-align: center;
background-image: url('boton.jpg');
float: left:
}
 
div.boton:hover{
background-image: url('boton_hover.jpg');
}
 

y si tu imagen tiene 150px x 50px, no necesitas posicionar el fondo. Si querés mejorarlo y evitar cualquier posible parpadeo, tenes que trabajar con una sola imagen de fondo de 150px x 100px (el doble de alto) y cambiar la posicion del fondo

Código CSS:

div.boton{
background-image: url('boton.jpg');
background-position: center top;
}
 
div.boton{
background-image: url('boton.jpg');
background-position: center -50px;
}
 

la es fijar con el css la posicion vertical de la imagen de fondo del boton con un valor negativo igual a la mitad del alto de la imagen...

Saludos