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
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 que criei para o DB ( é o azul):
Existem outros sites para criar botões personalizados em CSS:
