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:

botao-elegante-3-estados

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:, , ,

Um pensamento sobre “Construção de um botão elegante com CSS 3

  1. mbanpepgg@live.com janeiro 18, 2014 às 11:18 AM Reply

    Well I really enjoyed reading it. This tip procured by you is very practical for good planning.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: