Usando imagens de fundo para os botões
Muito parecido com 'começando botões' a diferença é que vamos usar imagens para dar um efeito melhor.
A mudança que faremos no CSS é no atributo 'background' onde passaremos o local onde se encontra a imagem.
Exemplo: Ir para BotaoWeb Outro botão
Começamos com o CSS:
<style type='text/css'>
a.botao:visited { /*Link visitado*/
color: #57CB34;
text-decoration: none;
}
a.botao{ /* A letra 'a' refere-se ao link com a classe botao */
margin-top: 10px; /* Margin do botão decima */
font-weight: bold; /* foont em negrito */
text-decoration: none; /* Retira o sublinhado do link */
display: block; /* Para que fique do tamanho determinado */
width: 160px; /* Largura */
height: 30px; /* Altura */
padding: 7px; /* espaço interno */
color: #fff; /* Cor do texto */
background: url('imagens/botao1.jpg') no-repeat; /* Dentro de 'url('')' vai o nome do arquivo de imagem e 'no-repeat' e para que não corra risco da imagem se repitir */
}
/* Quando passar o mouse sobre */
a.botao:hover{ /* Hover ação do mouse */
color: #fff;
background: url('imagens/botao2.jpg') no-repeat; /* Muda de botao1.jpg para botao2.jpg*/
}
</style>
Agora vamos fazer os links:
<a href='http://www.botaoweb.com/website/' class='botao'>Outro botão </a>
Imagens para download:
botao1.jpg 
botao2.jpg 
Pronto!
Agora é so abrir seu notepad jogar os dois códigos dentro e salvar como index.html
Espero ter ajudado ;-)
