Hay que ser un poco más curioso y fijarse en todo bien e investigar (no me rio de ti, sino de la sorpresa que te has debido llevar al ver que funciona y si lo coges y pegas no lo hace).
El truco se basa en el posicionamiento de la imagen de fondo. Todo empieza por hacer esta imagen:
Entonces la usas de fondo, de manera que con el enlace en reposo se ve sólo la mitad superior, y al pasar el ratón con
a:hover {background-position: left bottom;}
lo que haces es mostrar la mitad inferior.
Es un buen truco, porque además el cambio de imagen es mucho más rápido que con el onmouseover, ya que la imagen al completo está cargada y sólo cambia de posición el fondo.
No es mucho trabajo unir las imágenes de tus botones (pisado y sin pisar): yo como ves lo he hecho con dos en un minuto.