Efeito 3D em botões usando CSS
Por Erika Sarti, em 10_04_2008.
Introdução
Quanto mais nos preocupamos com a acessibilidade, mais descobrimos que é possível aplicar efeitos visuais sem o uso de Flash, apenas com algum conhecimento de CSS (Cascading Style Sheets).
Quando desenvolvemos um site com o menu em Flash, esse menu pode não ser acessível para todos os usuários, especialmente os que fazem uso de leitores de telas. Também existem usuários que desabilitam as animações no navegador, ou ainda que não têm instalada a mesma versão do player necessária para reproduzir a animação.
Se o menu tem algum efeito que possa ser reproduzido com HTML e CSS, usando sua criatividade e alguns pequenos truques é possível melhorar a acessibilidade do site e ainda deixá-lo mais leve.
Neste mini-tutorial, vamos aplicar o efeito de um botão 3D a um link, que ficará com a aparência de pressionado quando o usuário passar o mouse sobre ele, como no exemplo abaixo:
Acompanhe o passo a passo de criação. Lembre-se que é necessário ter conhecimentos mínimos de HTML e CSS para conseguir aplicar o efeito no seu site e personalizar a aparência do seu botão.
Crie seu arquivo HTML
Eis o código de um arquivo HTML que servirá de exemplo:
<html> <head> <title> Efeito 3D em botões usando CSS </title> <link href="estilo.css" rel="stylesheet" type="text/css" /> </head> <body> <form> <a href="#" class="botao3d" />Exemplo</a> </form> </body> </html>
Aqui estamos usando um link em vez de um botão comum
de formulário
<input type="submit" /> porque
a pseudo-classe :hover não funciona com os botões
em todos os navegadores.
Crie seu arquivo CSS
Agora, é necessário criar o arquivo CSS correspondente. Eis o exemplo deste tutorial:
<!--
.botao3d {
display: block;
border-color: #999 #000 #000 #999;
border: 1px solid;
loading="lazy" width: 200px;
padding: 10px;
background: #9F9;
color: #000;
font-family: Verdana;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.botao3d:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #000 #999 #999 #000;
background: #3F6;
}
-->A explicação
O primeiro bloco de declarações em .botao3d
display: block; border-color: #999 #000 #000 #999;
é o que faz a diferença neste efeito. A linha display:
block; define que botão terá aparência de um
bloco. A linha border-color: #999 #000 #000 #999; define
que as bordas serão, no sentido horário, cinza (#999), preto
(#000), preto e cinza. Esses valores são personalizáveis,
mas ter as bordas direita e inferior numa cor mais escura que as bordas
esquerda e superior é o que dá a aparência de 3D ao
elemento. Já as outras propriedades, como largura da borda, largura
do elemento, cor de fundo e fonte, são apenas um exemplo e podem
ser alteradas de acordo com o seu layout.
Em .botao3d:hover, definimos a aparência do elemento
quando o usuário passar o mouse sobre ele. O segredo aqui está
em deslocá-lo para baixo e para a direita, definindo que o elemento
terá uma posição relativa através da linha
position: relative;, e que ele estará deslocado 1
pixel para baixo (top: 1px;) e 1 pixel para a direita (left:
1px;). Também é importante inverter a cor das bordas:
para dar a aparência de pressionado, definimos as bordas direita
e inferior em cinza, e as bordas esquerda e superior em preto.
Finalizando
Usando a sua criatividade, você poderá aplicar vários efeitos a partir deste tutorial. Pode por exemplo definir como fundo uma imagem em degradê e aplicar o efeito rollover, que usa exatamente o mesmo princípio mas trabalha com a imagem de fundo ao invés da borda, e deixar esse botão com a aparência metálica.
Se quiser baixar os arquivos que serviram de exemplo neste tutorial para estudo próprio, clique aqui (em formato ZIP).
Erika Sarti é web designer e trabalha como free-lancer desde 2000, sendo também responsável pelo layout do Infowester. Mais informações em seu blog - www.erikasarti.com - e em seu portfólio - www.erikasarti.net -.