Introdução

Por vezes dá jeito criar um efeito de botão nos nossos links normais, seja para criar uma navegação mais interessante ou mais bonita.
Normalmente designers usam imagens com estados diferentes um normal outro quando o user passar com o rato pelo o link e outro quando o user carrega no link.
Mas só para usar esse troque o designer usa cerca de três imagens diferentes e o tempo de carregamento do nosso site pode ficar um pouco mais lento.

Usando apenas CSS o nosso site fica mais rapido e o efeito pode ser modicado simplestemente editando o no ficheiro de css.

O codigo em HTML

Para começarmos vamos primeiro criar o nosso codigo em HTML.
Consiste apenas de os links que queremos modificar. Neste exemplo temos, Pagina Principal, Acerca de Nos, Contactar.

<div id="navegacao">
<ul>
<li><a href="#" title="Pagina Principal">Pagina Principal</a></li>
<li><a href="#" title="Acerca de Nos">Acerca de Nos</a></li>
<li><a href="#" title="Contactar">Contactar</a></li>
</ul>
</div>

No nosso codigo HTML temos um div em que lhe atribuimos o id de navegacao, assim é mais façil podermos usar o css.

CSS com o efeito.

O CSS é que vai criar o efeito todo, sem imagens. Para tal para criar o efeito do botão vamos usar diferente cores nas bordas dos botões.
O botão normal tem o topo e o lado esquerdo de uma cor diferente, quando o user passa com o rato as cores mudam para criar o efeito do botão.
Sem mais demoras o codigo do CSS.

#navegacao {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

#navegacao ul{
list-style:none;
margin:0;
padding:0;
padding-top:4px;
}

#navegacao li{
display:inline;
}

#navegacao a:link, #navegacao a:visited{
margin-right:2px;
padding:3px 10px 2px 10px;
color:#A62020;
background-color:#FCE6EA;
text-decoration:none;
border-top:1px solid #FFFFFF;
border-left:1px solid #FFFFFF;
border-bottom:1px solid #717171;
border-right:1px solid #717171;
}

#navegacao a:hover{
border-top:1px solid #717171;
border-left:1px solid #717171;
border-bottom:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
}

Visita esta pagina para ver o efeito dos botões.