Transformando Links em Botões apenas usando o CSS

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

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

 

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

 

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

Endereço e a palvra que leva para aquele endereço.

Para usar o botão você deve inseirir um nome de classe a esse endereço:

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

No template de seu blog você deve inserir os atributos como mostrado abaixo:

/* ----- 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;
}

 

 

 

 

 

Se você usa o Blogger é só colocar este código imediatamente acima de  ]]></b:skin> .

Localize essa parte no seu código e insira esses atributos acima .

No local onde você quer colcoar um botão desse estilo coloque o código do endereço do botão e pronto.

Você pode personalizar cores, tamanhos, bordas ,  os efeitos de sobra e tudo mais.

Aqui vou colocar um  exemplo  de botão feito no CSS 3 .

Palavra do link