Boton de inicio del menú

[fede5426]

Yo lo haría de esta manera:

http://codepen.io/anon/pen/qEQjZK

Código HTML:

<a href="#">
    <div>ENLACE</div>
</a>
 

Código CSS:

a{
  text-decoration:none;
}
 
div{
  width:180px; /* ancho de la imagen */
  height:33px; /* alto de la imagen */
  text-align:center;
  color:#cbcbcb;
  font-family:verdana;
  background-image: url("images/tuimagen.jpg");
  padding-top:12px;
}
 
div:hover{
  background-image: url("images/tuimagen2.jpg");
  color:#006b00;
}
 

Seguro hay otras formas de hacerlo, la primera que se me ocurrió fue ésta :P

En cualquier caso, si querés que sea una imagen y que con hover cambie de color, no hay otra opción que usar dos imágenes.. y obviamente para que tenga las propiedades de un enlace, tenes que envolverlo con etiquetas <a></a>.

Saludos