Como transformar links em botões utilizando CSS3 no Blogger

Olá caro leitor, seja bem-vindo a mais um artigo do Bloggando Na Web. No artigo de hoje veremos como criar botões utilizando CSS3.

Já faz um tempo que eu comecei a utilizar esses botões aqui no blog, porém utilizo apenas no link “leia mais”.

Comecei também a utilizar esses botões customizados no meu novo blog: Blog do Aluno Contabilista, dessa vez no link “leia mais”, na sidebar e dentro dos artigos. Mas você pode ver alguns exemplos logo abaixo.

Botão 1 - Botão 2 - Botão 3 - Botão 4 - Botão 5 - Botão 6 - Botão 7 - Botão 8

Eu vou mostrar como criar esses botões em cima de links, mas nada impede que você utilize os atributos do CSS em qualquer outro elemento do blog! Agora vamos ao que interessa!

1. Primeiramente precisamos adicionar uma classe ao link que queremos transformar em botão! Então faça login no Blogger, acesse o painel de controle do seu blog clicando no ícone de casa e vá no menu Modelo.

2. Role a página até o final e faça uma cópia de segurança do seu template clicando no link “Fazer backup / Restaurar modelo”, e em seguida no botão “Fazer download do modelo completo”.

3. Agora você precisará encontrar o link que você deseja transformar em botão. Clique no link “Editar modelo” e marque a opção “Expandir modelos de widgets”, pressione Ctrl+F para abrir a janela Localizar do navegador e procure pelo código de um link.

O código de um link é semelhante ao mostrado no exemplo abaixo:

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

Para facilitar que você encontre os links que existem dentro do seu template, procure apenas pelo começo do código, que foi destacado em vermelho acima. Eu estarei utilizando como exemplo o link “leia mais” do Blogger. Se quiser utilizar o mesmo link, procure pelo código abaixo:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

4. Como você pode ver no código acima, a classe jump-link está dentro de uma DIV, então eu passarei ela para dentro do link. O código deverá ficar como o mostrado abaixo:

<b:if cond='data:post.hasJumpLink'>
<div>
<a class='jump-link' expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

5. Você pode manter o nome da classe como jump-link mesmo, ou mudar para qualquer outro que você quiser - eu manterei como está! Agora que a classe está dentro do link, adicionaremos o código CSS que irá adicionar o estilo de botão! Pressione Ctrl+F e procure o código abaixo:

]]></b:skin>

6. Imediatamente acima deste código, adicione este outro código:

/* ----- CSS do Jump-link (leia mais) ----- */

.jump-link {
    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.jump-link: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.jump-link: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.jump-link: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.jump-link: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;
}

Note que na frente de alguns elementos há comentários, os comentários são escritos da seguinte maneira /* exemplo de comentário */. Estes comentários servem para que você saiba o que cada atributo faz! Altere somente os atributos que contêm comentários à frente! Você pode ver uma lista com diversas cores para utilizar no seu botão clicando aqui.

7. Depois de colocar as cores que você quer para o botão clique em “Visualizar” e, se estiver tudo certo, clique em “Salvar modelo”.

Pronto, agora é só ir no seu blog e ver como está aparecendo o link “leia mais”.

-

Se você quiser adicionar o estilo de botão a algum outro link, basta procura-lo dentro do template ou dentro do artigo, adicionar uma classe à ele (com o nome que você quiser) e depois adicionar o CSS, lembrando de mudar o nome da classe no CSS!

Por exemplo, para fazer o botão 6 (roxo) que você viu acima, eu coloquei ele dentro do artigo da seguinte maneira:

<a class="post-example-button-6" href="#">Botão 6</a>

Em seguida adicionei o CSS da seguinte forma:

.post-example-button-6 { atributos aqui }
a.post-example-button-6:link { atributos aqui }
a.post-example-button-6:visited { atributos aqui }
a.post-example-button-6:hover { atributos aqui }
a.post-example-button-6:active { atributos aqui }

Então é isso, basta mudar o nome das classes e pronto! Espero que vocês tenham gostado do artigo e que façam bom uso dessa customização! Qualquer dúvida sinta-se a vontade para postar um comentário! Até o próximo artigo.

Artigo atualizado: 13/07/2011