Transformando Links em Botões usando o CSS3

Aqui vamos falar de uma dica muito interessante.

É de poder criar simples botões sem precisar fazer imagens  que podem dar trabalho e pesar seu site ou blog. Os botões são criados através do próprio código CSS3

O CSS 3 está  cada vez mais implementado e deixando para todos os usuários muitas possibilidades de utilização.

O código base para se criar um link é esse:

<a class="exemplo" href="endereço-da-página">Palavra do link</a>

Mas indo ao tutorial, siga os seguintes passos:

1. Faça login no Blogger

2. Em seguida no menu suspenso do início do blogger, clique em Modelo.

3. Em seguida clique no botão em Editar HTML

4. E procure pela seguinte tag:

]]></b:skin>

E cole o seguinte código Acima de ]]></b:skin>

/* ----- CSS do Exemplo  ----- */.exemplo {font:normal bold 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; /* fonte do link - define o tamanho da letra, fonte da letra etc */  margin:0px; } a.exemplo:link {     color:#FFFFFF; /* cor do texto do botão */     background:#FF4040; /* cor de fundo alternativo , aparecerá nos navegadores que não aceitam CSS3 */     background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD0000)); /* cores que formarão o gradiente de fundo, a primeira cor fica no topo do botão e a segunda na parte de baixo */     background: -moz-linear-gradient(top, #FF4040, #CD0000); /* repita as cores do gradiente que você escolheu */     border:1px solid #8B0000; /* cor da borda */     text-decoration:none;     padding:5px;     outline:none;     -moz-border-radius:5px; /* valor do arredondamento das pontas do botão */     -webkit-border-radius:5px; /* valor do arredondamento das pontas do botão */     -goog-ms-border-radius:5px; /* valor do arredondamento das pontas do botão */     border-radius:5px; /* valor do arredondamento das pontas do botão */ } a.exemplo:visited {     color:#FFFFFF; /* cor do texto do botão que já foi clicado */     background:#FF4040; /* cor de fundo alternativo do botão que já foi clicado */     background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD0000)); /* gradiente de fundo do botão que já foi clicado */     background: -moz-linear-gradient(top, #FF4040, #CD0000); /* gradiente de fundo do botão que já foi clicado */     border:1px solid #8B0000; /* cor da borda do botão que já foi clicado */     text-decoration:none;     padding:5px;     outline:none;     -moz-border-radius:5px; /* valor do arredondamento das pontas do botão */     -webkit-border-radius:5px; /* valor do arredondamento das pontas do botão */     -goog-ms-border-radius:5px; /* valor do arredondamento das pontas do botão */     border-radius:5px; /* valor do arredondamento das pontas do botão */ } a.exemplo:hover {     color:#FFFFFF; /* cor do texto do botão com o mouse em cima */     background:#FF4040; /* cor de fundo alternativo com o mouse em cima */     background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD0000)); /* gradiente de fundo com o mouse em cima */     background: -moz-linear-gradient(top, #FF4040, #CD0000); /* gradiente de fundo com o mouse em cima */     border:1px solid #8B0000; /* cor da borda com o mouse em cima */     text-decoration:none;     padding:5px;     outline:none;     -moz-border-radius:5px; /* valor do arredondamento das pontas do botão */     -webkit-border-radius:5px; /* valor do arredondamento das pontas do botão */     -goog-ms-border-radius:5px; /* valor do arredondamento das pontas do botão */     border-radius:5px; /* valor do arredondamento das pontas do botão */     -webkit-box-shadow: 0px 0px 5px #333333; /* cor da sombra do botão quando o mouse está em cima do botão */     -moz-box-shadow: 0px 0px 5px #333333; /*cor da sombra do botão quando o mouse está em cima do botão */     box-shadow: 0px 0px 5px #333333; /*cor da sombra do botão quando o mouse está em cima do botão */ } a.exemplo:active {     color:#FFFFFF; /* cor do texto do botão quando é clicado */     background:#000000; /* cor de fundo do botão quando é clicado */     border:1px solid #000000; /* cor da borda do botão quando é clicado */     text-decoration:none;     padding:5px;     outline:none;     -moz-border-radius:5px; /* valor do arredondamento das pontas do botão */     -webkit-border-radius:5px; /* valor do arredondamento das pontas do botão */     -goog-ms-border-radius:5px; /* valor do arredondamento das pontas do botão */     border-radius:5px; /* valor do arredondamento das pontas do botão */     -webkit-box-shadow: 0px 0px 0px #333333;     -moz-box-shadow: 0px 0px 0px #333333;     box-shadow: 0px 0px 0px #333333; }

E se desejar altere... (Cuidado)


Agora, para usar este botão use este código como base:

<a class="exemplo" href="endereço-da-página">Palavra do link</a>

O texto marcado de vermelho indica a página pra onde quer redirecionar, em verde é o texto que irá aparecer no botão.

Vou dar um exemplo de como ficaria:
<a class="exemplo" href="http://tecnoblog789.blogspot.com">Tecnoblog</a>


Um exemplo do botão sem modificação:
Palavra do link