Como Criar um Botão Estilizado Usando Apenas CSS

Atualização: não estou mais publicando artigos sobre design web no Tutoriart. Agora eles estão só no Blog Aprendiz.

Nesse tutorial você verá como transformar um link - na verdade, qualquer elemento em sua página - num botão estiloso, de bordas arredondadas e fonte personalizada, sem usar imagens pesadas nem scripts. Todo o processo será feito apenas com a folha de estilos e algumas regras CSS modernas como text-shadow e border-radius. No nosso exemplo os valores de sombra, larguras de borda e arrendondamento, assim como as cores usadas, podem ser mudadas por você facilmente, gerando assim uma infinidade de possibilidades para sua criação de botão personalizado.

Para começar, abra sua folha de estilos (para usuários de WordPress, normalmente é o arquivo style.css na instalação de seu blog). Para determinar quem vai usar o estilo, crie uma classe personalizada, a qual chamaremos "botao".

.botao { 

}

Quando pronta nossa classe, bastará chamá-la no código de nossas páginas através do identificador. Por exemplo, para usar o estilo botao em um link, usaremos um span, assim:

<a href="#"><span class="botao">Link</span></a>

Assim, todo o span, e não apenas o texto, terá o link.

Vamos agora personalizar o botão, veja como fica depois de pronto. Parece bem complicado e confuso, mas a explicação de cada regra está na sequência.

.botao {
padding: 4px 11px;

border: 1px solid #ffcc00;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

background-color: #ffcc00 !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc00), color-stop(100%,#ff6600)) !important;
background: -webkit-linear-gradient(top, #ffcc00, #ff6600) !important;
background: -moz-linear-gradient(top, #ffcc00, #ff6600) !important;
background: -ms-linear-gradient(top, #ffcc00, #ff6600) !important;
background: -o-linear-gradient(top, #ffcc00, #ff6600) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#ff6600',GradientType=0 );
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjY2MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

font-family:"Segoe UI";
font-weight: bold;
color: #fff;
text-shadow: 0 1px 0 #666;

box-shadow: inset 0 1px 1px #fff, 0 2px 3px #666;
cursor:pointer;
position: relative;
}

Explicando cada propriedade:

• O padding 4px 11px determina que o conteúdo do span ficará com 4px de espaço acima e abaixo do conteúdo, e 11px em cada lateral. Se quiser um botão mais estreito ou baixo, diminua os valores, e vice-versa.
• Os três valores do border determinam, respectivamente: a borda do span deverá ter 1 pixel de espessura; será sólido; será na cor hexadecimal ffcc00 (amarelo-ouro).
• O border-radius é uma propriedade moderna, que determina o quanto arredondadas serão as arestas do elemento que recebe-a. Neste caso, o valor será de 8 pixels em cada canto. Para garantir o funcionamento do arredondamento em vários navegadores, estão declarados também com prefixos proprietários -moz (Mozilla) e -webkit (Chrome, Safari) (ou seja, eles não são padrão do CSS, mas específicos para propriedades em determinados navegadores).
• O background determina a cor de fundo do elemento. Em nosso caso, será preciso fazer diferentes declarações para funcionar em todos os navegadores modernos, e também no Internet Explorer, que mesmo na versão mais atual ainda não renderiza efeitos seguindo o padrão.

  A primeira propriedade (background-color) vai atender aos navegadores mais antigos e sem suporte a nenhuma das propriedades seguintes, dando ao elemento a cor amarelo-ouro hexadecimal (ffcc00). Os outros navegadores terão um efeito de degradê no botão, começando do alto (top), com a cor ffcc00 e indo para a cor ff6600.
  
  Os webkit atenderão a Chrome e Safari (versões mais antigas na primeira propriedade, versões mais recentes na segunda; -moz, ao Firefox; -ms para as versões futuras de Internet Explorer; -o para Opera; o filter funcionará em versões do Internet Explorer entre 6 e 8. A última propridade background tem um xml gerado pelo site Colorzilla, codificado em BASE64, que é a única forma do Internet Explorer 9 criar degradês corretamente.
  
  Note que todas as propriedades, exceto o filter, usam a declaração !important, o que especifica que essas propriedades devem ter prioridade maior que o uso do filtro. Isso evita erros na renderização do degradê em outros navegadores que não sejam o Internet Explorer 9.

• Em font-family, está o tipo de fonte usada no botão. Pode ser qualquer uma ao seu gosto. Em font-weight, determina-se o "peso" da fonte, no caso, bold (tipo negrito). Em color, está a cor da fonte dentro do botão, neste caso, o valor para a cor branca (fff). Por fim, o text-shadow é outra propriedade razoavelmente recente. Os três primeiros valores determinam que a sombra do texto terá um deslocamento de 0 pixel lateral e 1 pixel vertical em relação ao texto, com um desfoque de 1 pixel. O último valor é a cor da sombra, um tom de cinza (666).
• O box-shadow é responsável por sombras no elemento (o span, em nosso caso). A primeira parte do valor, antes da vírgula, aplica-se ao topo do span, e a segunda parte, à base. O inset determina que a sombra será criada em direção ao interior do elemento, com deslocamento de 0 lateral e 1 pixel vertical, com desfoque de 1px, na cor branca (#fff). Na parte inferior do elemento, a sombra será para fora (note que não há o inset), deslocamento horizontal 0, vertical de 2 pixels, desfoque de 3 pixels, e no tom de cinza #666.
• Por fim, cursor: pointer determina que, ao passar o mouse sobre o elemento, o cursor do mouse se transforme na "mãozinha", tal como em um botão comum, e position: relative, dá ao elemento uma posição fixa em relação ao seu elemento pai (normalmente a div que a contém) - isso será essencial para o efeito de clique do botão.

Com isso tudo, seu botão já estará parcialmente estilizado e funcionando, mas ainda faltam alguns detalhes para completá-lo.

Clique-me

Primeiro, os efeitos quando passamos o mouse sobre o botão, com o seletor :hover.

.botao:hover {
box-shadow: inset 0 2px 5px #fff, 0 2px 3px #666;
}

O box-shadow mudou: agora os valores de deslocamento e desfoque da sombra superior (na verdade, o efeito de brilho branco) ficam diferentes - maior e mais espalhado. Ao passar o mouse, ele deverá ficar como visto abaixo:

Clique-me

E no botão ao ser clicado, também alguns efeitos com o seletor :active.

.botao:active {
box-shadow: inset 0 2px 5px #fff, 0 1px 3px #666 !important;
top:2px
}

Veja que mudaram valores da segunda parte, referente à sombra inferior do elemento. A sombra fica menor (apenas 1 pixel de distância). O top determina que o elemento se posiciona a 2 pixels de distância do topo de sua posição original - essa posição foi fixada pela propriedade position: relative, que criamos antes.

Então, ficamos com isso (passe o mouse para ver os efeitos de hover, e clique para os efeitos de active):

Clique-me Sou um Botão Eu Também

Lembrando que para inserir o estilo de botão é só usar um span com a classe botao. Faça testes e modifique os atributos para ver o que consegue de diferente, mescle com outros efeitos de CSS...

Atualização 08/2012:

Colocando links nos botões

Para colocar links nos botões é fácil, você só precisa linkar o span todo, como faria num texto comum.

<a href="#"><span class="botao">Clique-me</span></a>

Pra ter isso:

Clique-me

Note que como adicionamos um link ao texto, ele pode pegar estilos comuns aos links de seu pai, seja a página ou um container. Para sobrepor isso, um pouco mais de estilização:

.botao a, .botao a:active, .botao a:hover, .botao a:visited { color: #fff; text-shadow: 0 1px 0 #666; }

Este é o código do CSS completo para os botões:

.botao {
padding: 4px 11px;

border: 1px solid #ffcc00;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

background-color: #ffcc00 !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc00), color-stop(100%,#ff6600)) !important;
background: -webkit-linear-gradient(top, #ffcc00, #ff6600) !important;
background: -moz-linear-gradient(top, #ffcc00, #ff6600) !important;
background: -ms-linear-gradient(top, #ffcc00, #ff6600) !important;
background: -o-linear-gradient(top, #ffcc00, #ff6600) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#ff6600',GradientType=0 );
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjY2MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

font-family:"Segoe UI";
font-weight: bold;
color: #fff;
text-shadow: 0 1px 0 #666;

box-shadow: inset 0 1px 1px #fff, 0 2px 3px #666;
cursor:pointer;
position: relative;
}

.botao:hover {
box-shadow: inset 0 2px 5px #fff, 0 2px 3px #666;
background: -webkit-gradient(linear, left top, left bottom, from(#ffcc00), to(#ff6600)) !important;
}

.botao:active {
box-shadow: inset 0 2px 5px #fff, 0 1px 3px #666 !important;
top:2px
}
.botao a, .botao a:active, .botao a:hover, .botao a:visited { color: #fff; text-shadow: 0 1px 0 #666; }