Fonte de Código: Como fazer botões, passos 3 e 4

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

***

Marcadores: botões, chrome3, css, Drew Diller, firefox3.5, html, ie6, ie7, ie8, intermediário, png, tutoriais