Assine nosso Feed

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.

Related Posts with Thumbnails


Link desta Pagina

28Comentários:

rene menuchelli disse...

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

Explica por favor?

Fabiano Roberto disse...

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

Chaor disse...

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

musicstardownload@gmail.com

Anônimo disse...

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

Carol_carpen@hotmail.com

Fabiano Roberto disse...

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

Anônimo disse...

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

Fabiano Roberto disse...

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

c@rmencit@ disse...

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

Fabiano Roberto disse...

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

ÁDAMYS disse...

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

Fabiano Roberto disse...

Á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.

Harison disse...

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.

Fabiano Roberto disse...

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>

Harison disse...

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

Anônimo disse...

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

Fabiano Roberto disse...

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

Como fazer um banner

Igreja Presbiteriana do Boqueirão disse...

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

Fabiano Roberto disse...

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

rai disse...

como é que muda a cor da fonte?

Fabiano Roberto disse...

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

Val Araujo disse...

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?

Fabiano Roberto disse...

veja aqui como colocar imagens nos botões
Imagem ao lado do texto ou link

micarla disse...

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.

Fabiano Roberto disse...

sobre links lado a lado veja aqui:
Links lado a lado (menu horizontal)

Débora Cristina disse...

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

Fabiano Roberto disse...

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

*Anita* disse...

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

Fabiano Roberto disse...

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

Postar um comentário

Gostou? Compartilhe!