Voltar para o site

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

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo