Encontre esto en mi repertorio de snippets, en conceptopixel esta la info.
Debes unir esos dos botones en una sola imagen, la que quieres que este en reposo arriba, y lo que quieres que este en hover, abajo:
Ahora guarda esa imagen en png, gif o lo que sea con el nombre, digamos "boton.png".
Este es el codigo CSS si lo quieres poner en tu stylesheet.css (si lo quieres para una web HTML solo envuelve el CSS en la etiqueta <style type="text/css">codigo</style>
HTML:
boton {
display:block;
width:183px;
height:40px;
text-indent:-9999px;
}
.boton a {
display:block;
width:183px;
height:40px;
background:transparent url(http://DIRECTORIO/boton.png) no-repeat top left;
outline:none;
}
.boton a:hover {
background-position:0 -40px;
}
Nota que tienes que sustituir el width por el de tu boton y el height por la altura media del total de tu boton, es decir que si tu boton mide 300 pixeles de ancho y 50 de alto, el width debe ser 300 y el height (en todos debe ser) debe ser 25 (la mitad), nota tambien que en la propiedad:
background-position:0 -40px; debes poner tambien la mitad de la altura, esta propiedad hace que al poner el raton encima, se recorra 40 pixeles hacia arriba mostrando la otra mitad.
Nota tambien que tienes que sustituir el DIRECTORIO por la URI donde se encuentra el boton.
ahora vamos, para llamarlo usa el siguiente parrafo con clase, puede ser un vinculo tambien.
HTML:
<p class="boton"><a alt="Titulo Alternativo" title="Titulo" href="http://www.google.com.mx"></a></p>
Y ya tienes tu boton, fuente, un tutorial mio:
Crear un Boton con Efecto Hover usando Photoshop y CSS | Inblogos
