Botões CSS para usar no seu blog

Criar botões elegantes com CSS para usar em seu blog, site ou página da web nem sempre é uma tarefa fácil. É necessário conhecer tags, elementos e outros detalhes que em média só o desenvolvedor para a web conhece bem. Desconhecer CSS não significa que seu blog será para sempre da mesma forma como você o escolheu ou comprou, e quero lhe ajudar nessa.

USANDO BOTÃO CSS NO BLOGGER

Vou apresentar alguns modelos de botões e seus respectivos códigos para usar em seu blog conforme o que mais lhe agradar. O primeiro modelo é batizado de ‘Flat’ com cantos arredondados, modelo plano e com transições para locais simples:

Teste Contato Media Kit
Teste Contato Media Kit
Teste Contato Media Kit

Código CSS:

.flat-ab {
background:#e74c3c;
margin:10px;
color:#FFF;
padding:15px 8px;
border-radius:5px;
text-shadow:none;
display:inline-block;
border:none;
cursor:pointer;
}

.flat-ab:hover {
background:#c0392b;
text-decoration: none;
}

.concreto {background:#95a5a6;}
.concreto:hover {background:#7f8c8d;}

.turquesa {background:#1abc9c;}
.turquesa:hover {background:#16a085;}

Este código poderá ir diretamente com os demais códigos de seu blog clicando em Modelo depois Editar HTML depois de localizar <style type="text/css">. Caso queira poderá adicionar um Gadget de HTML/JavaScript e inserir esse código dentro das tags <style type="text/css"> e </style> Usando botão CSS no Blogger

Basta usar a seguinte linha no local que desejar em seu blog (no modo HTML)

<a href="URL_DESTINO" class="flat-ab concreto">Nome do botão</a>

OBS: Na Class do link se você deixar apenas Flat-ab ele terá uma aparência, no exemplo ele tomaraá a aparência do modelo 'concreto', insira a palavra turquesa após o flat e terá um novo modelo, também poderá deixar apenas flat-ab ou criar um novo modelo para seu botão.

Este modelo se parece muito com os botões de ajuda e interações da Google em suas páginas internas:

Teste Contato Media Kit

Código CSS

.ab-boton {
border: none;
margin:10px;
color: #fff;
display: inline-block;
font: 300 16px/31px "Open Sans","Helvetica Neue",Arial,sans-serif !important;
height: 32px;
background-color: #267cc2;
padding: 0 24px;
cursor:pointer;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,.25);
white-space: nowrap;
border-radius: 2px;
box-shadow: 0 2px 1px rgba(0,0,0,.19),inset 0 -1px 0 rgba(0,0,0,.19),inset 0 1px 0 0 rgba(255,255,255,.19);
background-color: #267cc2;
background-image: -webkit-gradient(linear,left bottom,left top,from( #42a5e1),to( #267cc2));
background-image: -webkit-linear-gradient( #42a5e1, #267cc2);
background-image: -moz-linear-gradient( #42a5e1, #267cc2);
background-image: -ms-linear-gradient( #42a5e1, #267cc2);
background-image: -o-linear-gradient( #42a5e1, #267cc2);
background-image: linear-gradient( #42a5e1, #267cc2);
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
}

.ab-boton:hover {
box-shadow: 0 4px 1px rgba(0,0,0,.19),inset 0 -3px 0 rgba(0,0,0,.19);
text-decoration: none;
}

.ab-boton:active, .ab-boton:focus {
box-shadow: inset 0 2px 0 0 rgba(0,0,0,.19),inset 0 12px 24px 6px rgba(0,0,0,.19),inset 0 0 2px 2px rgba(0,0,0,.19);
}

Após inserir ou atualizar sua folha de estilo CSS ou inseri-la em um gadget, para chamar o botão em sua página basta usar o seguinte código:

<a href="URL_DESTINO" class="ab-boton">Nome do botão</a>

Caso queira harmonizar melhor as cores (ou modificá-las) poderá gostar de conhecer o Combinador de cores. Recomendo que tome cuidado com a cor do link base de seu blog pois ele por influenciar a cor do texto do seu botão.

Estes códigos são criações de Victor Calderón via Blog