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
Parte HTML
1. Parte CSS
3. Clique em Editar HTML 4. Pesquisar o código abaixo no seu modelo
]]></b:skin>
5. Copie e cole o código abaixo ANTES de ]]></b:skin>
.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9d4wMewkr_WlWWpfMCpBJp3OjMZXcMbrB6Nk-glV2Ivf-eeP5xKJkF-kXyjOyfNRG68PWEJTgKW38idIg5Q94MFDi2LfI7Ln99uIMq9aSdkW-4uvENhLmorLdglCufAg3UNUg9jEfBY/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)
<a href="LINK AQUI" class="button big blue">TEXTO AQUI</a>
<a href="LINK AQUI" class="button big green">TEXTO AQUI</a>
<a href="LINK AQUI" class="button big orange">TEXTO AQUI</a>
<a href="LINK AQUI" class="button big gray">TEXTO AQUI</a>
2. HTML para o botão médio (Escolha qualquer um de acordo com a cor do botão)
<a href="LINK AQUI" class="button blue medium">TEXTO AQUI</a>
<a href="LINK AQUI" class="button green medium">TEXTO AQUI</a>
<a href="LINK AQUI" class="button orange medium">TEXTO AQUI</a>
<a href="LINK AQUI" class="button gray medium">TEXTO AQUI</a>
3. HTML para o botão pequeno (Escolha qualquer um de acordo com a cor do botão)
<a href="LINK AQUI" class="button small blue">TEXT AQUI</a>
<a href="LINK AQUI" class="button small green">TEXT AQUI</a>
<a href="LINK AQUI" class="button small orange">TEXT AQUI</a>
<a href="LINK AQUI" class="button small gray">TEXT AQUI</a>
4. HTML para o botão oval (Escolha qualquer um de acordo com a cor do botão)
<a href="LINK AQUI" class="button small blue rounded">TEXTO AQUI</a>
<a href="LINK AQUI" class="button small green rounded">TEXTO AQUI</a>
<a href="LINK AQUI" class="button small orange rounded">TEXTO AQUI</a>
<a href="LINK AQUI" class="button small gray rounded">TEXTO AQUI</a>
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!
o único tutorial que deu certo ...
valeu mesmo :)