Botões com CSS

Publicado em: 09/11/2003
Atualizado em: 09/03/2005

Como criar botões com CSS

Neste tutorial vou explicar como fazer funcionar botões dinâmicos com CSS.

A técnica é relativamente simples e consiste basicamente em utilizar-se as propriedades dos seletores a:link e a:hover para se fazer a troca de uma imagem de fundo, projetando-se uma gif animada para a imagem do estado a:hover.

Então, vamos precisar de duas imagens do botão. Uma para o estado normal do link e uma para o estado "mouse sobre", sendo esta última, uma uma gif animada!

Construa no seu programa gráfico preferido as duas imagens de acordo com suas preferências e necessidades.

As imagens que usarei neste tutorial são estas que você vê abaixo.

imagem para o botão no estado link em repouso botao_link.gif (dimensões: 120 x 24 pixeis)

imagem para o botão no estado link hover botao_hover.gif (dimensões: 120 x 24 pixeis)

Nosso botão será para "acionar" um link em consequência temos o primeiro elemento da marcação HTML já definido. É o elemento <a></a>. E, vamos colocar o elemento <a></a> dentro de uma outra "caixa" o elemento <p></p>, para facilitar nosso controle sobre a "estilização" CSS, através da criação de uma classe para o elemento <p></p>.

Vamos chamar a classe a criar de: .botao

Esse raciocínio define a marcação HTML para o botão:

...............
<body>
<p class="botao">
<a href="#" title="Meu Link">Botão CSS</a>
</p>
.............

Esta marcação ainda sem aplicação do estilo produz na tela o seguinte:

Botão CSS

Vamos então estilizar a classe .botão

1o.) - posicionamento do botão na tela:

.botao  {
position:absolute;
top:20px;
left:50px;
margin:0px;
padding:0px;
        }

2o.) - definições para o elemento link em seu estado inicial:

  • propriedades da fonte, como tamanho, cor, alinhamento, sublinhado, familia;
  • dimensões da "caixa" (essas dimensões devem ser iguais as dimensões das gif's do fundo - no nosso caso 120px por 24px);
  • espaçamentos e margens;
  • alinhamentos;
  • fundo;
.botao a {  
font: bold 12px/24px arial, helvetica, sans-aerif;	
padding:0px;
text-decoration: none;
text-align:center;	
color:#ccc;
background: #666 url('botao_link.gif')
no-repeat center center; width:120px; height:24px; display:block; }

E, finalmente o estado over do link:

.botao a:hover { 
background: #666 url('botao_hover.gif') no-repeat 
center center; color:#999; }

E o código completo do botão:

<head>
................
<style type="text/css">
<!--
.botao  {
position:absolute;
top:20px;
left:50px;
margin:0px;
padding:0px;
        }

.botao a, .botao a:visited {  
font: bold 12px/24px arial, helvetica, sans-aerif;	
padding:0px;
text-decoration: none;
text-align:center;	
color:#fff;
background: #666 url('botao_link.gif') no-repeat 
center center; width:120px; height:24px; display:block; } .botao a:hover { background: #666 url('botao_hover.gif') no-repeat
center center; color:#999; } --> </style> </head> <body> <p class="botao"> <a href="#" title="Meu Link">Botão CSS</a> </p> .............

....e, o botão funcionando! (passe o mouse em cima)

Botao CSS

Nota: A gif animada do estado over não funcionou no navegador Opera 6.05

Meu nome é Maurício Samy Silva e eu sou conhecido na Web como Maujor.

Mantenho o Site do Maujor hospedado em: maujor.com e meu e-mail de contato é maujorcss[ARROBA]maujor [PT]com.

Minha residência é em:

Copacabana - Rio de Janeiro,, RJ - - Brasil