Banner propaganda da DevMedia - Cursos de desenvolvimento web

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®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo