Como criar botões com CSS

 

Com o advento e avanço do CSS 3, muitos designers estão optando por reduzir o uso de imagens em sites, a fim de aumentar a velocidade das páginas da web. Eu já ensinei algumas técnicas legais pra deixar seu blog do Blogger mais bonito e profissional e hoje vou explicar como criar botões (buttons) usando apenas CSS.
Entre no site  Button Maker e utilize o painel da direita para personalizar o botão:

Use os 3 controles deslizantes para escolher o tamanho e profundidade do botão.
Embaixo, escolha as cores da seguinte maneira:

• Top Gradient Color: cor do topo em gradiente
• Bottom gradiente color: cor de baixo em gradiente
• Top Border Color: cor da borda do topo
• Hover background color: cor do fundo ao passar o mouse
• Text Color: cor do texto
• Hover Text Color: cor do texto ao passar o mouse
• Active background color: cor de fundo ao clicar no botão

Depois que o botão estiver pronto, clique sobre ele e copie o código.

Entre no painel do Blogger, clique em design>editar HTML. Faça um backup do template e cole o código antes da tag ]]></b:skin> (use o Crtl+F do teclado para encontrá-la). Substitua o ponto (.) que está antes de cada palavra “button” por jogo da velha (#). Ficará assim:  #button. Visualize e salve.

Em “elementos de página”, clique em adicionar gadget HTML/javascript.

Cole este código:

<div id="button>ESCREVA AQUI O TEXTO</div>

Escreva, no local indicado, o texto que deverá aparecer no botão. Se quiser colocar um link, use este outro código:

<div id="button"><a href=”LINK”>TEXTO</a></div>

Pronto! Agora seu blog já tem um botão feito apenas com CSS ;)
Veja, na imagem abaixo, um botão de exemplo ( é o azul):

Existem outros sites para criar botões personalizados em CSS:

• CSS Button Generator
• CSS3 Button Generator
• CSS Button Maker