Enlaces con fondo Mouseover

La mayoría de nosotros vemos que al entrar en un sitio de Wordpress notamos que hay una variedad de "Botones" con imagen,y que el mismo tiene un enlace y ademas es muy decorativo que no puedan copiar una imagen que hicimos etc...
Eso no es nada del otro mundo, no es de la plataforma ni nada por el estilo se trata de que esas imagenes, no son imagenes con enlace, sino enlaces con un fondo doble (Mouseover), La técnica es hacer una imagen debajo de la otra.
Para empezar deberemos hacer esto con pruebas

Ejemplo:

Se trata de crear una imagen como se vé en el ejemplo, dejando un pequeño espacio debajo de la primera.

Ahora para hacer este famoso efecto usaremos este código:

<a href="http://www.ciberexperto.blogspot.com/" style="background:transparent url(https://lh3.googleusercontent.com/-t-Zny0lST9Y/TfyokX-VroI/AAAAAAAAAyg/UkppTEqvrAc/Prueba%2525201.png) no-repeat center top; width:136px; height:77px; display: block; text-decoration: none" onmouseout="this.style.backgroundPosition='top';"
onmouseover="this.style.backgroundPosition='bottom';" title="Aquí un texto alterno"/">
</a>

Bien, yo lo tengo configurado junto con la imagen, deberán personalizar el tamaño de la imagen para que pueda cambiar al hacer clic.

Y el resultado será este:

¿Fácil no?