Fonte de Código: 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: