Button Replacement

Por: Henrique Pereira

Categoria: HTML / CSS / JavaScript

A estilização de input do tipo submit ou button não é algo novo. Procurando um pouco no Google, você encontrará dezenas de artigos ensinando como estilizar um input (o site foi desatualizado) submit ou button por css. Dependendo do layout os resultados obtidos podem até ser satisfatórios, mas a maioria dos webdesigners vão querer utilizar uma imagem que se harmonize melhor com o restante do layout do que um botão padrão estilizado. Dessa forma, quando se quer ter botões visuais, a alternativa comum é utilizar os input do tipo image, onde você insere um “src” de uma imagem que será utilizada como botão.

Bom até aqui nada de novo, mas imagine se você pudesse utilizar um botão do tipo submit ou button, colocar uma classe nele e alterar a aparência de todos os botões do seu site exclusivamente por CSS? Me deixe explicar melhor.

Eu desenvolvi uma maneira diferente de se utilizar botões visuais sem utilizar botões do tipo “image”. Eu disse “eu desenvolvi” por que eu não encontrei nada na internet sobre isso. Esforcei-me, procurei, mas nada encontrei. Se você já ouviu falar sobre o cálculo infinitesimal de Leibniz e Newton, com certeza deve saber que ambos chegaram às mesmas conclusões matemáticas, separadamente mais ou menos na mesma época. A ambos é creditado a invenção do cáculo infinitésimal. Por isso se você encontrar este código por aí, pelo menos algo publicado anteriormente me avise.

A técnica consiste no seguinte. Se você utilizar uma das diversas formas de image replacement para alterar a aparência de botões exclusivamente por CSS ela não vai funcionar. Testei algumas e a mais comum e eficiente é a que utiliza text-indent negativo para retirar o conteúdo e colocar uma imagem por CSS no lugar. Na verdade isto até poderia funcionar em alguns browsers com certas limitações, mas em outros não. Ao invés disso, tive que adaptar o CSS a realidade do botão.

No MSIE utilizei

text-indent:0px; line-height:999999px; border:0px;

Isso tem que ser inserido como hack, para que somente o Internet Explorer possa interpretar assim. Sem nenhum segredo a mais. Isso é necessário porque no Mozilla eu coloco um text-indent vantajoso para poder fazer a troca, o que não pode ser concebido pelo Internet Explorer.

Foi relativamente estranho inicialmente descobrir a importância do border:0px (na verdade você não precisa usar o px) em um domingo à tarde, de um dia quente e delirante. E quem teve este insight (do border:0px) foi o Bruno Torres, que também é a minha única testemunha fidedigna e com algum credito para esta técnica. Pelo Messenger, eu mostrei a ele o que tinha feito e lhe prometi que daria os créditos pelo border:0px e cumpri!

Para o Opera, a questão é mais delicada. Também é necessário inserir um hack próprio pra ele onde eu utilizo os seguintes atributos:

font-size:1px; padding-left:90px;

O padding-left é o responsável por empurrar o conteúdo e o font-size para torná-lo pequeno o suficiente para não ter que ser empurrado a uma distância maior. O text-indent negativo gera uma barra de rolagem no Opera que é evitada com este hack.

Talvez você esteja se perguntando qual a real vantagem em utilizar esta técnica no mundo real com sites feitos prêt-à-porter onde não há muitos botões. Bom, minha sugestões são as seguintes.

Se você tem um site muito grande, com vários botões do tipo submit/button, nos mais variados contextos, você pode economizar código tendo o endereço (source) de todos estes botões em um único lugar. Se você pensa em manter o código fonte e trocar o layout de um trabalho um dia, você também pode ter total controle mantendo o endereço do botão em um único CSS. Se você tem um site e pretende ter mais de um template ativo, como estou pretendendo ter neste site, você pode ter botões personalizados para cada template que quiser, considerando que o source dele também vem de CSS. E em uma última hipótese, saber que você simplesmente pode ter os endereços destes botões vindos por CSS, nada mais.

Em suma, depende do tipo de controle que você quer ter em um site. Na minha opinião, eu prefiro manter todo o endereçamento, de qualquer elemento que utilize uma imagem em meu CSS , mesmo que isto utilize alguns caracteres a mais, do que mantê-los no XHTML.

Você pode conferir um exemplo desta técnica em uso no hotsite Rubens de Freitas e uma página de exemplo (não válida antes que alguém comente) para você conferir todo o CSS deste artigo. Eu testei no Mozilla Firefox, MSIE e Opera. Talvez esta técnica não funcione no Konqueror e no Safari. Você pode me ajudar a testar e encontrar uma solução pra isso, ou simplesmente me detonar. Você escolhe como quer contribuir. Se der uma solução que funcione, me mande um screenshot por e-mail nos browsers que testar que eu te dou os créditos aqui!

Agora mande suas críticas sobre isto que eu escrevi. Se isso te chocou, arrepiou ou te causou qualquer outro sentimento por mais primitivo que seja, poste aqui suas críticas e desabafe.

Artigos relacionados:

• swfir – SWF Image Replacement
• Animated Scroll em JavaScript
• Dynamic Text Replacement
• Image Replacement.
• Pullquotes em CSS
• As Dicas de CSS que você não deve deixar de saber
• Refresh de CSS para o Mozilla Firefox

Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!