Fazer botão

Vou mostrar hoje como fazer botões usando CSS, é bem simples basta colocar os códigos nos lugares certos, veja abaixo:
.botao a{
width: 220px;
color: #000000;
text-decoration: none;
display: block;
font-family: "Comic Sans MS";
font-size: 10pt;
text-align: left;
background-color: #33FFFF;
border: 1px solid #0000CC;
padding: 3px;
}
.botao a:hover{
color: #0000FF;
background-color: #FF9966;
border: 1px solid #FFFF00;
}

Coloque essa parte junto com os demais estilos CSS da sua pagina, isso fica na pagina editar HTML. É bem fácil, procure por:


body{....}
img{...}
a:link{....}
No seu blog terá muitos outros códigos além desses.



Este código é um modelo, você pode mudar praticamente tudo nele, veja o que cada parte faz:


width: largura do botão
color: cor da fonte
text-decoration: none; retira o sublinhado
font-family: "Comic Sans MS"; tipo da fonte
font-size: 10pt; tamanho da fonte
text-align: left; alinhamento
background-color: #33FFFF; cor do fundo
border: 1px solid #0000CC; cor, tipo, e largura da borda
padding: 3px; espaço entre o texto e as bordas


Se quiser também pode usar uma imagem como fundo, mas use uma imagem do tamanho exato do botão, para fazer isso troque background-color: #33FFFF, por background-image: url(URL DA IMAGEM);

Agora vamos a segunda parte, colocar os botões no site, entre na página layout, adicionar gadget, html/javascript e coloque o código abaixo:
<div class="botao">
<a href="URL DO SITE">NOME DO SITE</a>
<a href="URL DO SITE">NOME DO SITE</a>
<a href="URL DO SITE">NOME DO SITE</a>
<a href="URL DO SITE">NOME DO SITE</a>
</div>
Com isso podemos colocar quando links quisermos e não é difícil fazer, depois somente vamos adicionando mais links e se quisermos mudar os estilos dos botões somente precisamos mexer no estilo CSS que foi mencionando acima.

28 comentários :

  1. Eu não entendi a parte do "colocar o trecho dentro disso"

    Explica por favor?

    ResponderExcluir
  2. o código CSS é pela pagina editar html e os link pela pagina layout adicionar um gadget, html/javascript

    ResponderExcluir
  3. Olha ainda naum entendi porfavor me explique, por e-mail?

    musicstardownload@gmail.com

    ResponderExcluir
  4. oi eu fiz mas ficou um embaixo do outro não deveria ficar no lado??

    Carol_carpen@hotmail.com

    ResponderExcluir
  5. esse código eles ficam um embaixo do outro, para ficar lado a lado use o código do menu horizontal
    http://dicasparablogs.blogspot.com/2009/05/links-lado-lado-menu-horizontal.html

    ResponderExcluir
  6. ola,

    queria saber como colocar um botão na postagem.

    ex: colocar uma imagem de download e o site de destino, em blog de downloads

    ResponderExcluir
  7. geralmente os sites onde você hospeda os arquivos para download já dão o código pronto, mas se quiser fazer outro botão é só usar o mesmo link e criar uma imagem

    ResponderExcluir
  8. Bom Dia!
    Fabiano, gostaria de saber como faço para colocar aquele botão ou íconi, não sei como chama, do orkut em meu blog, ende eu ou meus amigos possa clikar e ir para o orkut.se puder me ajudar?
    Desde já agrdeço o carinho.
    Abraço e mto sucesso!!!
    Carmen

    ResponderExcluir
  9. c@rmencit@
    fazer um botão para o orkut é como para qualquer outro site, você precisa de uma imagem e colocar nela o link do seu perfil ou comunidade no orkut, veja aqui sobre como fazer uma banner, o procedimento é o mesmo

    http://www.dicasparablogs.com.br/2010/01/como-fazer-um-banner.html

    ResponderExcluir
  10. Oii
    Eu denovo aqui :D
    olha Eu fiz tudo certinho...
    mais eu so queria saber, como faço para o 1° botão fique de Uma Cor diferente das Outras de baixo ?
    Vlw & Obrigado

    ResponderExcluir
  11. ÁDAMYS você teria que criar um estilo diferente para o primeiro botão

    e usar o código assim
    <a class="estilo" href="URL DO SITE">NOME DO SITE</a>

    naquele botão que deseja diferente.

    ResponderExcluir
  12. Olá fabiano, estou com a mesma dúvida do Anônimo. Queria saber como Colocar uma imagem como link, Por exemplo : Numa postagem eu deixei um link pra baixarem um arquivo, só que eu queria deixar esse link com outra aparência, como um botão onde estivesse escrito bem grande "DOWNLOAD". No blogger temos a opção de alterar o nome nome do link, mas o que eu quero é que, ao invés de aparecer um nome, apareça uma imagem. Pensei em colocar um banner, mas daí ficaría numa parte predeterminada, o que eu não quero. Podería me ajudar? abraço, seu blog é 10.

    ResponderExcluir
  13. para usar uma imagem como botão de download precisa trocar o link pelo código da imagem, assim:

    <a href="lnk do download" target="_blank"><img src="endereço da imagem" border="0" /></a>

    ResponderExcluir
  14. Poxa, muito obrigado Fabiano. Você é a pessoa mais prestativa que eu já vi na internet. Seu blog é muito util e você é muito eficiente. Um abraço

    ResponderExcluir
  15. Amigos estou montando um blog para postar cartões para serem compartilhados no orkut,eu não estou conseguindo fazer aquela caixa para disponibilizar o HTML para os seguidores copiarem abaixo de cada postagem...
    Por favor me deem uma dica para eu poder fazer este trabalho...

    E-Mail ravena_sol@yahoo.com.br

    Abraços

    ResponderExcluir
  16. aqui tem um gerador de código que faz aquelas caixinhas

    Como fazer um banner

    ResponderExcluir
  17. Olá.. Adicionei imagens na coluna lateral do Blog. Só que elas estão muito afastadas, queria que as imagens ficassem mais próximas.

    ResponderExcluir
  18. Igreja Presbiteriana do Boqueirão
    tem muito espaço entre as imagens? isso depende de como adicionou as imagens se for uma em cada gadget seria complicado resolver pois tem que mudar a configuração do blog todo

    ResponderExcluir
  19. como é que muda a cor da fonte?

    ResponderExcluir
  20. o trecho color: #000000; é a cor da letra só precisa trocar o 000000, veja aqui o Código das Cores

    ResponderExcluir
  21. como faço para colocar imagem na frente dos links do índice do blog. Aprendi aqui a colocar o índice mas gostaria de saber como faço para colocar botoes no início de cada link do índice. Já procurei aqui mas não acho nada q me explique direitinho como fazer.
    O q faço?

    ResponderExcluir
  22. Boa noite,esse eu consegui colocar direitinho,mais eu queria lado a lado,e o código do menu horizontal que peguei aqui http://dicasparablogs.blogspot.com/2009/05/links-lado-lado-menu-horizontal.html
    até consegui colocar lá mais na hora de mexer no código pra fazer os botões não da certo.Quando visualizo(gadget)vejo direitinho ai quando salvo fica um abaixo do outro.Acho que não to conseguindo fazer os botões.Não tem como fazer esse ficar lado a lado?obrigado.

    ResponderExcluir
  23. oi, eu fiz tudo isso mais não sei como almenta a letra, coloca outra cor, eu tentei mais invez de aparecer aparece o link e não o que eu fiz, e quando clica no que eu escrevi aparece, desculpe mais isso que está no blog não existe

    ResponderExcluir
  24. os códigos que mostramos não tem no modelo padrão é para criar a formatação do botão...

    ResponderExcluir
  25. Você poderia criar uma video-aula? Achei muito complicado, não consigo entender muito bem. Uma video-aula ajudaria muito! Obrigada

    ResponderExcluir
  26. já publicamos alguns videos, mas não sobre fazer botão com codigos CSS como neste tutorial...

    ResponderExcluir