Conforme já comentamos em posts anteriores aqui do blog, o CSS3 é uma maravilha que veio para facilitar nossa vida e tornar a formatação visual de elementos algo simples, rápido, acessível e otimizável.

Hoje vamos mostrar a vocês como criar botões de cair o queixo apenas utilizando algumas linhas simples de código. Acredite, não são imagens, é puro CSS! Alguns browsers, no entanto, podem não suportar o CSS3 e se você estiver usando uma versão de navegador mais antiga, provavelmente não conseguirá ver o que essa maravilha é capaz de fazer. Um exemplo testado aqui na Agência foi o Firefox 3.0 para Mac, que não exibiu os efeitos de sombra; já na versão 3.5, ficou perfeito.

O CSS3 conta com alguns recursos fantásticos como a possibilidade de aplicar sombra aos elementos (Box-Shadow e Text Shadow), novas opções de aplicação de cores e a possibilidade de criar boxes com bordas arredondadas. Para este exemplo, utilizaremos recursos do CSS3 e HTML 5.

Podemos criar botões facilmente com a tag button. Assim, para incluir um botão em nossa página, bastaríamos escrever um código do tipo:

<button type="submit" class="btsombra">Ver mais detalhes</button>

Sem formatação, ele aparece assim no Safari do Mac OS:

1. Utilizando o recurso Box Shadow e RGBa para ajustar a tonalidade da sombra:

O modelo de cor RGBa é suportado por browsers novíssimos, e você pode aplicá-lo juntamente com a propriedade Box Shadow para definir a cor da sombra de seus botões e outros elementos. Observe os exemplos abaixo:

Para definirmos uma sombra escura básica para os nossos botões, o exemplo de código a ser aplicado na classe seria:

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

Os valores dentro dos parêntesis podem ser alterados para números entre 0 a 255 na escala RGB, sendo os três primeiros referentes às tonalidades da sombra e o último à sua opacidade (zero é totalmente transparente, “1″ totalmente opaco); para a sombra ciano, colocamos um valor de 0 para o primeiro campo e 255 para as demais cores, mais o valor “1″ para a opacidade:

-moz-box-shadow: 0 1px 3px rgba(0,255,255,1);
-webkit-box-shadow: 0 1px 3px rgba(0,255,255,1);

Apenas uma observação: os parâmetros de CSS “-moz” aplicam os estilos ao Mozilla Firefox e “-webkit” ao Safari.

Para aplicarmos sombra ao texto adicionamos a seguinte linha de código aos estilos:

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

2. Bordas arredondadas!

Chega de imagens, recortes complicados, planos de fundo! Utilize o recurso Border-Radius para arredondar os vértices de seus botões e criar efeitos surpreendentes.

O código usado para o botão acima foi:

-moz-border-radius: 25px;
-webkit-border-radius: 25px;

Outros exemplos:

Você ainda pode usar o CSS para aplicar efeitos de roll over de cursor sobre os botões.

Esperamos que tenham gostado! Confira aqui os botões funcionando e faça o download dos exemplos aqui.

As dicas são do site Zurb.

Obs#2: O Internet Explorer 8 não suporta o recurso de bordas arredondadas.

Um super abraço e até o próximo post