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

***

Como fazer botões, passos 3 e 4

continuando do Passo 2

Passo 3

Temos inúmeros scripts na web para tratar de imagens PNG no IE6, para nosso exemplo entretando optei pela solução de Drew Diller, chamada "DD_belatedPNG".

Inicialmente precisaremos adicionar uma classe (".png") em nosso html:

<div class="btns png">
    <a href="#">Pesquisar</a>
</div>

Com essa classe lá, bastará chamarmos o arquivo .js de nosso amigo Drew Diller (você pode baixá-lo aqui) e declararmos que em tags com a classe .png, ou em links dentro dessas tags, o script deverá rodar. Para termos certeza de que isso só será chamado no IE6, envolveremos o código com o famoso teste "if IE" dentro de comentários (porque será que a Microsoft pensou nisso?):

<!--[if IE 6]>
<script type="text/javascript" src="../pngfix.ie6.min.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('.png, .png a');</script>
<![endif]-->

Isso pode entrar em qualquer parte do código, mas é melhor que entre junto com os outros scripts dentro da tag <head>.

Bem, se tudo correu bem, bastará cruzar os dedos e abrir nosso botão no IE6...

Além disso, vamos aproveitar e adicionar bordas arredondadas ao nosso botão! Isso mesmo, hoje em dia isso pode ser feito somente por CSS, embora tenhamos de usar algumas tags-proprietárias de cada browser. Vamos ao CSS adicional:

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

Reparem que aplicamos uma borda ao botão, borda esta que muda de cor no rollover; Além disso, aplicamos 8px de borda arredondada ao botão com 3 declarações diferentes: border-radius é o padrão do CSS3, mas este ainda não foi implementado por quase nenhum browser...

Felizmente, porém, tanto o Firefox quanto o Chrome (e o Safari, no qual é baseado) tem tags-proprietárias que realizam o mesmo efeito: -moz-border-radius (Firefox) e -webkit-border-radius (Chrome/Safari). Tenha em mente que usando essas tags proprietárias intencionalmente, seu css não passará por validadores sem erros, mas acredito que esse seja um pequeníssimo preço a pagar.

Agora teremos um botão bem mais interessante:

Ver Passo 3

Isto é, exceto no IE (é claro)... O que nos leva a uma outra solução com JavaScript no Passo 4...

***

Passo 4

Você devia estar achando que esse tutorial estava interessante, mas que como vários outros tutoriais interessantes de css, esbarraria no famigerado IE, e portanto não poderia ainda ser utiliado em seus projetos web. Afinal, como vimos, mesmo o Twitter deixa seu visual "quadrado" para os usuários de IE.

Isso é chamado de "degradação com beleza", uma forma esforçada de tentar definir o conceito corrente de que, se um design não pode parecer igual em todos os browsers, que ao menos façamos com que nos browsers com menor capacidade (leia-se: IE) ele ainda fique o mais interessante possível.

Tudo isso é muito bonito e revigorante, mas não servirá de nada se o seu cliente simplesmente exigir que o IE mostre os malditos botões com bordas arredondadas!

Bem, felizmente nosso querido amigo Drew Diller também solucionou esse problema com míseros 9kb de JavaScript. Sua solução foi entitulada "DD_roundies" (os programadores geralmente são bem melhores com programação, se comparado a criatividade para nomes e títulos).

Para fazer as bordas funcionarem no IE bastará chamar o arquivo .js de Drew Diller em nosso código (você pode baixá-lo aqui):

<!-- faz border-radius funcionar no IE, depois ajusta CSS no IE8 -->
<script type="text/javascript" src="js/ie.border.radius.min.js"></script>
<script type="text/javascript">
    //uso: DD_roundies.addRule('.sua-classe', #); onde # = border-radius
 DD_roundies.addRule('div.btns a', 8);
</script>
<!--[if IE 8]>
<style type="text/css" media="screen">
div.btns a {border:0;background-image:url(img/bt_bg.png) !important;padding-bottom:7px;}
</style>
<![endif]-->

Conforme consta nos comentários (é sempre bom comentar quando usamos código "fora do escopo tradicional"), estamos aplicando 8px de border-radius nos links (tags <a>) dentro de um <div class="btns">.

Como a Microsoft se esforça para infernizar nossa vida, devo adiantar que apenas no IE8 econtraremos um problema caso utilizemos bordas em nosso botão. Por isso utilizamos um teste condicional dentro de comentários para corrigir o problema apenas no IE8... Não me pergunte porque, mas mesmo com border:0; o botão continua tendo bordas. Bem, talvez o script de nosso amigo Drew Diller não seja infalível, mas já foi de grande ajuda até aqui!

O layout de nosso botão não mudou em nada, mas agora ele aparecerá com bordas arredondadas mesmo no IE. Pronto, pense nas possibilidades!

Ver Passo 4

***

A seguir, no Passo 5, aplicaremos mais alguns efeitos decorativos. Infelizmente desta vez não há nada que poderemos fazer quanto ao IE...

***

Como fazer botões, passos 1 e 2

Um dos elementos mais usados no design para web são os botões. Até pouco tempo atrás botões mais elaborados eram criados diretamente pelo designer no photoshop ou programa similar, e já trazia o texto "embutido" na imagem. Algo como:

No entanto, hoje em dia já é possível criar botões com design elaborado, efeitos de rollover e bordas arredondadas apenas com CSS (e algum script para o IE, mas veremos isso em breve). Você pode achar que o botão "Join Today" (junte-se hoje) da home do Twitter.com é uma imagem - senão com texto "embutido", no mínimo com imagens de fundo com bordas arredondadas:

Mas não! Trata-se de um botão criado apenas com CSS, a única imagem existente é um PNG com alguma transparência que dá o efeito de degradê no fundo. Porém, esse tipo de formato de construção de botões permite que editemos o texto, as cores de fundo e até mesmo a curvatura das bordas facilmente - apenas editando CSS. Além disso, acaso o usuário aumente a fonte, o botão irá se ajustar automaticamente (ponto para acessibilidade).

Caso você já tenha testado a home do Twitter em vários browsers, deve ter percebido que no IE não temos bordas arredondadas pela página - incluindo o bortão de que falei... No entanto, com um pouco de JavaScript é possível deixar tudo arredendado mesmo no IE... Vamos ver como se faz.

Passo 1

Primeiro vamos definir o html de nosso botão (no caso, um exemplo comum, o botão de "Pesquisar"):

<div class="btns">
    <a href="#">Pesquisar</a>
</div>

Agora vamos definir o estilo básico inicial usando um pouco de css:

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;
 text-decoration:none;
}
div.btns a:hover {
 background-color:#a14141;
}

Definimos a fonte e o espaçamento, assim como a cor de fundo (azul) e o efeito de rollover, que muda a cor de fundo para vermelho. Nosso botão deverá ser algo simples por agora:

Ver Passo 1

***

Passo 2

Agora vamos adicionar uma imagem de fundo ao botão, para dar um efeito interessante ao fundo. Essa imagem é um PNG simples com 50x200 pixels, onde na metade superior temos um box com fundo branco e transparência em 15%. Isso permite que o efeito seja aplicado sobre a cor de fundo já defunida no CSS - e dessa forma acaso mudemos a cor de fundo (como no rollover) o efeito irá permanecer, sem que tenhamos de criar múltiplas imagens para o mesmo botão. Veja abaixo uma imagem dessa imagem PNG sendo criada no Fireworks:

Com a imagem criada, devemos atualizar nosso CSS (repare que alinhamos ela a esquerda e ao centro vertical [0 50%], e a fizemos se repetir indefinidamente no eixo horizontal [repeat-x]):

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

Isso nos trará um botão mais interessante:

Ver Passo 2

***

Porém, como muitos devem saber, imagens PNG com transparência não "se comportam muito bem" no IE6 e inferiores...

A seguir, no Passo 3, usaremos um pouco de JavaScript para corrigir a rebeldia de nosso querido IE6...

***