Encontrei isto no meu repertório de snippets, no conceptopixel tem a informação.
Você deve unir esses dois botões em uma única imagem, a que você quer que esteja em repouso em cima, e o que você quer que esteja em hover, embaixo:
Agora salve essa imagem em png, gif ou o que seja com o nome, digamos "botao.png".
Este é o código CSS se você quiser colocar no seu stylesheet.css (se você quiser para uma web HTML, apenas envolva o CSS na tag <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;
}
Note que você tem que substituir o width pelo do seu botão e o height pela altura média do total do seu botão, ou seja, se o seu botão mede 300 pixels de largura e 50 de altura, o width deve ser 300 e o height (em todos deve ser) deve ser 25 (a metade), note também que na propriedade:
background-position:0 -40px; você deve colocar também a metade da altura, essa propriedade faz com que ao colocar o mouse em cima, ele percorra 40 pixels para cima mostrando a outra metade.
Note também que você tem que substituir o DIRETÓRIO pela URI onde se encontra o botão.
Agora vamos lá, para chamá-lo use o seguinte parágrafo com classe, pode ser um link também.
HTML:
<p class="boton"><a alt="Titulo Alternativo" title="Titulo" href="http://www.google.com.mx"></a></p>
E pronto, você já tem seu botão, fonte, um tutorial meu:
Criar um Botão com Efeito Hover usando Photoshop e CSS | Inblogos
