![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
Atendendo o pedido de alguns leitores do blog, hoje vamos ensinar como adicionar alguns botões muito legais, feitos com puro CSS3 e efeito animados para blogger. Estes botões feitos com puro CSS3, quando se posiciona o mouse sobre eles as bolhas ficam tremendo e este efeito faz com que esses botões fiquem ainda mais bonitos.
Estes botões estão disponíveis em quatro cores e três tamanhos diferentes, de modo que você pode adicionar um botão de qualquer tamanho apenas mudando o nome da classe do botão.
Como adicionar os botões CSS3 animados para Blogger em seu blog
Para você entender melhor vou dividir este artigo em duas partes.
Parte CSS
Parte HTML
1. Parte CSS
1. Entre no Painel do Blogger – Clique em Modelo
2. Como sempre fazer um backup do seu modelo
3. Clique em Editar HTML
4. Pesquisar o código abaixo no seu modelo
]]>
5. Copie e cole o código abaixo ANTES de ]]>
.button {
font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
text-decoration: none !important;
white-space: nowrap;
display: inline-block;
vertical-align: baseline;
position: relative;
cursor: pointer;
padding: 10px 20px;
background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
background-position: bottom left;
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’);
/* Multiple backgrounds version. The background images
are defined individually in color classes */
background-position: bottom left, top right, 0 0, 0 0;
background-clip: border-box;
/* Applying a default border raidus of 8px */
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
/* A 1px highlight inside of the button */
-moz-box-shadow: 0 0 1px #fff inset;
-webkit-box-shadow: 0 0 1px #fff inset;
box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;
}.button:hover {
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
background-position: top left;
background-position: top left, bottom right, 0 0, 0 0;
}.button:active {
/* Moving the button 1px to the bottom when clicked */
bottom: -1px;
}
/* The three buttons sizes */
.button.big {
font-size: 30px;
}.button.medium {
font-size: 18px;
}.button.small {
font-size: 13px;
}
/* A more rounded button */
.button.rounded {
-moz-border-radius: 4em;
-webkit-border-radius: 4em;
border-radius: 4em;
}
/* Defining four button colors */
/* BlueButton */
.blue.button {
color: #0f4b6d !important;
border: 1px solid #84acc3 !important;
/* A fallback background color */
background-color: #48b5f2;
/* Specifying a version with gradients according to */
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}.blue.button:hover {
background-color: #63c7fe;
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button {
color: #345903 !important;
border: 1px solid #96a37b !important;
background-color: #79be1e;
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}.green.button:hover {
background-color: #89d228;
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button {
color: #693e0a !important;
border: 1px solid #bea280 !important;
background-color: #e38d27;
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}.orange.button:hover {
background-color: #ec9732;
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}.gray.button {
color: #525252 !important;
border: 1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}.gray.button:hover {
background-color: #b6bbc0;
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image: url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), url(‘http://4.bp.blogspot.com/-BMF-y6Z_j1s/T6kpRal1xTI/AAAAAAAABoY/9chp3dt8REg/s1600/helperblogger-button_bg.png’), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}
Agora que você já integrou a parte do CSS no modelo, vamos ver como usar os botões CSS3 animados para Blogger.
2. Parte HTML
Pois bem, aqui estou listando a parte HTML do botão de acordo com seus tamanhos. Primeiro escolher o tamanho do botão, em seguida escolher a cor do botão.
1. HTML para o botão grande (Escolha qualquer um de acordo com a cor do botão)
TEXTO AQUI
TEXTO AQUI
TEXTO AQUI
TEXTO AQUI
2. HTML para o botão médio (Escolha qualquer um de acordo com a cor do botão)
TEXTO AQUI
TEXTO AQUI
TEXTO AQUI
TEXTO AQUI
3. HTML para o botão pequeno (Escolha qualquer um de acordo com a cor do botão)
TEXT AQUI
TEXT AQUI
TEXT AQUI
TEXT AQUI
4. HTML para o botão oval (Escolha qualquer um de acordo com a cor do botão)
TEXTO AQUI
TEXTO AQUI
TEXTO AQUI
TEXTO AQUI
Agora substitua “LINK AQUI” com o link que você deseja adicionar ao botão e substituir “TEXTO AQUI” com o texto que você deseja que apareça em seu botão.
Isto é tudo. Eu espero que você goste destes botões.
Até a próxima!
ain ain vocês são demais eu tava procurando a tempo esses botões valeu mesmo