Construção de um botão elegante com CSS 3

Alguns eventos recentes na minha vida profissional estão me fazendo dar grande foco para a área de programação de interfaces. Por isso, resolvi escrever um post mais prático sobre esse assunto. No post de hoje, vou mostrar como transformar um link HTML (<a></a>) em um botão elegante, estilo Web 2.0, usando algumas das novas propriedades do CSS 3, tais como text-shadow e box-shadow.

Ao final do passo a passo, você deve obter um botão assim:

Botão com diferentes estados para mouse-fora, mouse-sobre e clique.

Primeiro, vamos ver o CSS necessário para dar ao botão a aparência de seu primeiro estado (quando o mouse estiver fora dele).

a.botao-2-0 {
   display: inline-block; /* elemento tipo block que aceita conteúdo ao seu redor (como um inline) */
   width: 200px; /* largura */
   height: 40px; /* comprimento */
   border: 1px solid black; /* borda de 1px, tipo solid, cor preta */

/* border-radius determina o quão curva é a borda. Para dar suporte a browsers mais a
antigos, usamos as notações específicas da engines Webkit (Chrome, Safari) e Gecko (Firefox). Se você não sabe o que é a engine de um browser, veja http://pt.wikipedia.org/wiki/WebKit */
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;

   background-color: #FFC75C; /* cor de fundo */

/* box-shadow define a sombra de um elemento. Como primeiro argumento, coloque inset
para sombra interna (ignore esse argumento para sombra externa). O primeiro valor
define a sombra lateral (inset: valores negativos se referem ao lado direito; para sombras externas, valores negativos se referem ao lado esquerdo); o segundo valor
define a sombra vertical (inset: valor negativos se referem à sombra de baixo; para sombra externa, valores negativos se referem à sombra superior). O último argumento
é o quão borrada é a sombra; quanto maior o valor, mais larga e fraca a sombra
*/
   -webkit-box-shadow: inset -3px -3px 3px #7F5B14;
   -moz-box-shadow: inset -3px -3px 3px #7F5B14;
   box-shadow: inset -3px -3px 3px #7F5B14;

text-align: center; /* texto centralizado */
text-transform: uppercase; /* texto em caixa alta */

/* sombras, mas para textos. Aqui, o inset não pode ser usado, a sobra é sempre externa */
   -webkit-text-shadow: 1px 1px 2px #7F5B14;
   -moz-text-shadow: 1px 1px 2px #7F5B14;
   text-shadow: 1px 1px 2px #7F5B14;

letter-spacing: 4px; /* espaçamento entre as letras */
   font-weight: 900; /* nível de negrito da fonte */
   font-size: 12px; /* tamanho da fonte */
   font-family: Orbitron, sans-serif; /* tipo de fonte */

/* Se não houver quebra de linha no conteúdo, colocar a altura da linha igual
à altura do elemento é uma maneira fácil de se obter centralização vertical */
   line-height: 40px;

/* nível de opacidade. .8 = 80% */
   opacity: .8;
}

Esse código é o suficiente para dar ao botão a aparência do primeiro estado mostrado na imagem do início do post. No entanto, como fazer o botão mudar de estilo quando o mouse estiver sobre ele (ou quando o botão estiver sendo clicado)? Desde o CSS 2, podemos usar pseudo-classes para definir que mudanças de estilo um elemento terá dado o acontecimento de algum evento (como, por exemplo, o ponteiro do mouse sendo posicionado sobre o elemento).

/* Algumas das pseudo-classes disponíveis desde o CSS 2
:link - seleciona links dentro de elementos
:visited - seleciona links visitados
:focus - o elemento tem o foco na tela
:hover - o ponteiro do mouse está sobre o elemento
:active - o elemento está ativo (isso geralmente significa o clique do mouse ou o enter do teclado) */

a.botao-2-0:link, a.botao-2-0:visited, a.botao-2-0:focus, a.botao-2-0:hover, a.botao-2-0:active {
    color: black;
    text-decoration: none;
}

/* Quando o elemento estiver em foco (ou com o ponteiro do mouse sobre ele), aumentamos
sua opacidade para 100% */
a.botao-2-0:focus, a.botao-2-0:hover {
    opacity: 1;
}

/* Quando o botão estiver sendo clicado (ou ativado com o enter) mudamos as sombras da caixa
e do texto de forma que ele fique com a aparência de um botão afundado */
a.botao-2-0:active {
    -webkit-box-shadow: inset 3px 3px 3px #7F5B14;
    -moz-box-shadow: inset 3px 3px 3px #7F5B14;
    box-shadow: inset 3px 3px 3px #7F5B14;
    -webkit-text-shadow: -1px -1px 2px #7F5B14;
    -moz-text-shadow: -1px -1px 2px #7F5B14;
    text-shadow: -1px -1px 2px #7F5B14;
}

Como explicado nos comentários do código, o segredo para dar a aparência de afundado para o botão é trabalhar com a pseudo-class :active e trocar as sombras internas de posição (de direita e baixo para esquerda e cima). Nesse exemplo, estou usando a fonte Orbitron (Ultra-Bold 900), que pode ser obtida em www.google.com/webfonts. Para conveniência, criei também uma página HTML já com os estilos para o botão. A página de exemplo pode ser baixada clicando aqui (File > Download).

Quaisquer dúvidas ou observações, basta deixar um comentário nesse post mesmo.

Espero que esse tutorial tenha sido útil para vocês. Até a próxima!

Obs: Este tutorial foi testado nos seguintes navegadores: Google Chrome (24.0.1312.57 m), Mozilla Firefox (18.0.1) e Internet Explorer (9.0.8112.16421). No IE, a fonte Orbitron não será carregada (e ocorrerá o fallback para sans-serif), mas isso é assunto para um outro post xD

Anúncios

Marcado:box-shadow, CSS 3, HTML5, text-shadow