Como criar botões para links de download usando CSS

Os dois últimos tutoriais aqui no blog foram relacionados a criar links de download de arquivos armazenados no Google Drive. Neste tutorial irei apresentar como estilizar esses links usando apenas os estilos em CSS.

Leia:
- Como colocar arquivos para download no Blogger
- Como criar links para download de arquivos criados no Google Drive

Construa o link dentro de uma tag span com uma classe de atributo button em seu editor de texto no modo HTML, conforme abaixo:

<span class="button"><a href="URL-DO-LINK">Download</a></span>

Use o alinhamento em seu editor de texto para centralizar ou não o link.

Acrescentando o código CSS:

- Para acrescentar um código CSS no template do Blogger, o jeito mais simples é usar o Designer de modelo, indo em painel de controle >> Modelo >> Personalizar >> Avançado >> Adicionar CSS:

Adicionar legenda

- Outro jeito de incluir o CSS é direto no template, indo em painel de controle >> Modelo >> Editar HTML >> procurar por <b:skin>...</b:skin>, e colar o código CSS antes de ]]></b:skin>:

Dê um clique na seta para abrir a secção do CSS

Cole o CSS antes de ]]></b:skin>

Mas só use esse método se você tiver o mínimo de conhecimento em layouts do Blogger!

- Outra maneira é adicionar um gadget HTML/Javascript indo em painel de controle >> Layout >> Adicionar um gadget. O código CSS deve ser colocado entre as tags <style> e </style> junto com o link :

<style>
INSIRA O CÓDIGO CSS AQUI
</style>
<span class="button"><a href="URL-DO-LINK">Download</a></span>

Portanto, sem mais delongas, vamos a alguns exemplos de botões:

Código CSS de um botão simples:

.button {
   border: 1px solid #dddddd;
   background: #ccc;
   padding: 5px 10px;
   color: #ffffff;
   font-size: 14px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   background: #eeeeee;
   color: #cccccc;
   }
.button:active {
   background: #dddddd;
   }

Exemplo:

Normal e quando  passa o mouse por  cima

Código CSS de um botão com cantos arredondados:

..button {
   border: 1px solid #dddddd;
   background: #cccccc;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   padding: 5px 10px;
   color: #ffffff;
   font-size: 14px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
..button:hover {
   background: #eeeeee;
   color: #ccc;
   }
..button:active {
   background: #dddddd;
   }

Exemplo:

Normal e quando  passa o mouse por  cima

Código CSS3 de um botão com cantos arredondados, degradê e sombra:

.button {
   border: 1px solid #dddddd;
   background: #cccccc;
   background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#eeeeee));
   background: -webkit-linear-gradient(top, #cccccc, #eeeeee);
   background: -moz-linear-gradient(top, #cccccc, #eeeeee);
   background: -ms-linear-gradient(top, #cccccc, #eeeeee);
   background: -o-linear-gradient(top, #cccccc, #eeeeee);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 2px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #fcfcfc;
   font-size: 14px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   background: #eeeeee;
   color: #cccccc;
   }
.button:active {
   background: #dddddd;
   }

Exemplo:

Normal e quando  passa o mouse por  cima

Nos exemplos acima, criei botões com variações da cor cinza (#cccccc, #dddddd e #eeeeee), você pode alterar/testar as cores usando uma tabela como esta ao seu gosto. O tamanho da fonte (font-size) e o tipo de fonte (font-family), bem  como sua cor (color) também podem ser estilizados conforme as suas preferências.

Obs.:
1 - Apesar de eu ter direcionado este tutorial para estilizar os links de download, ele serve para qualquer outro tipo de botão que você tenha em mente.
2 - Este tutorial está direcionado para os usuários do Blogger. Mas regras de CSS valem também para qualquer outra plataforma.