Como fazer botões, passos 5 e 6

continuando do Passo 4

Passo 5

Mesmo indo além do que o IE pode oferecer (ainda que se considerando o uso de JavaScript), ainda podemos incrementar o layout de nosso botão para usuários do Firefox e do Chrome. Esses browsers já conseguem ler o atributo de CSS3 box-shadow, ainda que utilizando tags-proprietárias (exatamente como com o border-radius). Utilizando esse atributo iremos agora aplicar um efeito de sombra ao evento de rollover de nosso botão:

div.btns a {
 font-size:12px;
 font-family:helvetica,arial,sans-serif;
 font-weight:bold;
 letter-spacing:1px;
 padding:5px 12px;
 color:#fff;
 background:#3792b3 url(img/bt_bg.png) repeat-x 0 50%;
 text-decoration:none;
 border:1px solid #3792b3;
 border-radius:8px;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
}
div.btns a:hover {
 background-color:#a14141;
 border-color:#a14141;
 box-shadow:2px 2px 4px #999;
 -moz-box-shadow:2px 2px 4px #999;
 -webkit-box-shadow:2px 2px 4px #999;
}

Em nosso evento de rollover, estamos aplicando um efeito de sombreamento ao botão na cor #999 (cinza claro). Este efeito se estende a 2px abaixo e 2px para direita do botão (valores negativos também poderiam ser usados aqui) e aplica um efeito de "blur" de 4px. Para quem costuma usar efeitos parecidos em programas como Photoshop ou Macromedia, esses parâmetros são de simples entendimento.

De fato, é quase como se estivéssemos editando o css com um programa de edição de imagens... Vejam como fica bem interessante este efeito nos browsers mais inteligentes (qualquer coisa além do IE é "mais inteligente"):

Você não deve se sentir desencorajado em usar a "degradação com beleza". Se seu cliente perguntar porque você se atraveu a ignorar o IE e aplicar sombreamento de rollover somente nesses browsers de geeks, informe-o que sites como YouTube.com (repare no rollover dos botões, como "Gostei") já fazem o mesmo. Deve ser o suficiente...

Antes do passo final, vamos chegar ao ápice do perfeccionismo nerd e utilizar um atributo exclusivo do webkit (Chrome/Safari) e que não consta sequer no CSS3, mas que é absolutamente sensacional. O -webkit-transition faz um efeito de transição entre alguma cor ou cor de fundo, transformando gradualmente a cor padrão na cor da classe de rollover. É algo que na prática é muito parecido com efeitos em flash, a diferença é que trata-se de puro CSS (embora, por enquanto, proprietário do webkit):

div.btns a {
 font-size:12px;
 font-family:helvetica,arial,sans-serif;
 font-weight:bold;
 letter-spacing:1px;
 padding:5px 12px;
 color:#fff;
 background:#3792b3 url(img/bt_bg.png) repeat-x 0 50%;
 text-decoration:none;
 border:1px solid #3792b3;
 border-radius:8px;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 -webkit-transition:background-color .3s linear;
}

Estamos informando ao Chrome que a transição da cor de fundo (background-color) deve ser linear e durar 3 décimos de segundo (repare que aplicamos a tag-proprietária na classe "a", e não em "a:hover" - é assim mesmo). Não vou criar um gif animado ou vídeo apenas para te mostrar quão interessante ficou nosso rollover de botão, para ver basta abrir o link abaixo com o Chrome ou Safari:

Ver Passo 5

Embora apenas os felizardos que navegam com o Chrome possam ver esse efeito de rollover, é algo que não custa quase nada adicionar, e que não deverá deixar nenhum cliente de cabelo em pé...

***

Passo 6

Chegamos ao passo final. Nesse passo não quero adicionar mais nenhum layout ou efeito com css. Gostaria apenas de demonstrar o quão simples é editar um botão construído dessa forma.

Vamos agora mudar nosso código html para inserir um texto bem mais extenso ao nosso botão:

<div class="btns png">
    <a href="#">Cadastrar-se na promoção e concorrer a muitos prêmios</a>
</div>

Agora, em nosso css, vamos aumentar bastante o tamanho da fonte (lembre-se que isso também é um teste comum de acessibilidade) e mudar a cor de fundo do botão para verde:

div.btns a {
 font-size:26px;
 font-family:helvetica,arial,sans-serif;
 font-weight:bold;
 letter-spacing:1px;
 padding:5px 12px;
 color:#fff;
 background:#6c9441 url(img/bt_bg.png) repeat-x 0 50%;
 text-decoration:none;
 border:1px solid #6c9441;
 border-radius:8px;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 -webkit-transition:background-color .3s linear;
}

Pronto, em alguns segundos, temos um botão comum de pesquisa transformado em um gigantesco botão de cadastro para a última promoção de noso site (certamente o pessoal de marketing pensaria num título melhor para esse botão):

Acredito que para a imensa maioria dos portais de conteúdo, esse método se mostrará muito mais prático e elegante do que contratar um designer exclusivo para produzir milhares de botões diferentes. Tudo bem que isso pode tirar o emprego do designer, mas acredito que se ele ler este tutorial, nem irá se importar :)

Ver Passo 6

***

Nota final: parte desse tutorial foi diretamente inspirada no capítulo 2 do excelente livro de Dan Cederholm: "Hancrafted CSS".

***