Botões Css3 para blogger

Desta vez estamos compartilhando um conjunto de botões CSS3 para blogger. Este conjunto de botões contém 6 botões de cores diferentes (rosa, verde, azul, vermelho, laranja e amarelo) e dois tamanhos diferentes (grande e médio). Ele foi desenhado por papermashup e eu quero compartilhar aqui no Dicas Blogger para os meus leitores.

Você pode adicionar esses botões em duas etapas em seu blog, também o uso dos botões é muito fácil.

Como adicionar e usar os botões CSS3 para Blogger?

1. Acesso o Painel do Blogger e navegue até Modelo > Editar HTML

(Veja: Como acessar o código XML/HTML na nova interface do blogger)

2. Encontre o seguinte código ]]> (use CTRL + F para encontrar o código)

3. Agora adicione o código abaixo antes de ]]>

.button, .button:visited {
background: #222;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
font-family: calibri;
}

.button:hover {
background-color: #111;
color: #fff;
}

.button:active {
top: 1px;
}

.small.button, .small.button:visited {
font-size: 11px
}

.button, .button:visited,
.medium.button, .medium.button:visited {
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

.medium.button, .medium.button:visited {
font-size: 14px;
padding: 8px 14px 9px;
}

.large.button, .large.button:visited {
font-size: 34px;
padding: 8px 14px 9px;
}

.rosa.button, .magenta.button:visited {
background-color: #e22092;
}

.rosa.button:hover {
background-color: #c81e82;
}

.verde.button, .green.button:visited {
background-color: #91bd09;
}

.verde.button:hover {
background-color: #749a02;
}

.vermelho.button, .red.button:visited {
background-color: #e62727;
}

.vermelho.button:hover {
background-color: #cf2525;
}

.laranja.button, .orange.button:visited {
background-color: #ff5c00;
}

.laranja.button:hover {
background-color: #d45500;
}

.azul.button, .blue.button:visited {
background-color: #2981e4;
}

.azul.button:hover {
background-color: #2575cf;
}

.amarelo.button, .yellow.button:visited {
background-color: #ffb515;
}

.amarelo.button:hover {
background-color: #fc9200;
}

Salve seu template

Agora que você adicionou os estilos dos botões em seu blog, vamos ver como usá-los.

Como usar os botões CSS3 no Blogger?

Estes botões são muito fáceis de usar, logo abaixo está o código HTML de todos os  botões. Siga os passos abaixo para usá-los.

1. Durante a edição do post clique em Editar HTML
2. Escolha o código do botão abaixo e cole
3. Substituir LINK e TEXTO com o seu

1. Código HTML para os botões Grandes

TEXTO

TEXTO

TEXTO

TEXTO

TEXTO

TEXTO

2. Código HTML para os botões Médios

TEXTO

TEXTO

TEXTO

TEXTO

TEXTO

TEXTO

Substitua LINK com sua URL
Substitua TEXTO com o texto que você quer que apareça no botão.

Boa sorte.

Até a próxima!