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:

Exemplo (passe o mouse)

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;
			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 -.