These animated bubble buttons are
made with pure CSS3 and on mouse hover the bubble star shaking and this effect
makes these button more beautiful. This button is available in four different
color themes and three sizes so that you can add any button of any size just by
changing the class name of button.
1. Log in to Blogger.
2. Go to Blogger
Dashboard and Select Template.
3. Click on Edit
HTML.
4. Backup your
Template before making any changes to your blog.
5. Now Click on Edit
HTML.
6. Press Ctrl + F
and search the code shown below.
]]></b:skin>
.button {
font:15px Calibri,
Arial, sans-serif;
text-shadow:1px 1px
0 rgba(255,255,255,0.4);
text-decoration:none!important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
background-repeat:no-repeat;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png);
background-position:bottom
left, top right, 0 0 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0
1px #fff inset;
-webkit-box-shadow:0
0 1px #fff inset;
box-shadow:0 0 1px
#fff inset;
-webkit-transition:background-position
1s;
-moz-transition:background-position
1s;
transition:background-position
1s;
padding:10px 20px;
}
.button:hover {
background-position:top
left, bottom right, 0 0 0 0;
}
.button:active {
bottom:-1px;
}
.button.big {
font-size:30px;
}
.button.medium {
font-size:18px;
}
.button.small {
font-size:13px;
}
.button.rounded {
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}
.blue.button {
color:#0f4b6d!important;
border:1px solid
#84acc3!important;
background-color:#48b5f2;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png),
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png),
0 to(rgba(89,208,244,0))), 0 to(#3faeeb));
}
.blue.button:hover {
background-color:#63c7fe;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png),
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png),
0 to(rgba(109,217,250,0))), 0 to(#58bef7));
}
.green.button {
color:#345903!important;
border:1px solid
#96a37b!important;
background-color:#79be1e;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png),
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png),
0 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/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png),
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png),
0 to(rgba(183,229,45,0))),-webkit-gradient(linear,0%0%,0%100%,from(#90de31),
to(#7fc01e));
}
.orange.button {
color:#693e0a!important;
border:1px solid
#bea280!important;
background-color:#e38d27;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png),
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png),
0 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/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png),
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png),
0 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/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png),
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png),
0 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/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png),
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBDw_UOxx0jw09Yv4G2dI2EAH5EIp-KHfMNtHvol2dwHhZU1_GruA9VULEbN2grZxeJvBlhUG8A1pkYP1YfwiHosFpadcyxbYQ5QoSICovk5wYEqinpFRt7fbtcr-GzvJCeLKLyznbnDl/s1600/bloghelpstreet.blogspot.com-button_bg.png),
0 to(rgba(202,205,208,0))),-webkit-gradient(linear,0%0%,0%100%,from(#d1d3d6),
to(#9fa5a9));
}
How to Add this
Bubbles Button In a Post
HTML For Big Button (Choose anyone
according to button color)
1. <a
href="#" class="button big blue">TEXT HERE</a>
2. <a
href="#" class="button big green">TEXT HERE</a>
3. <a
href="#" class="button big orange">TEXT HERE</a>
4. <a href="#" class="button
big gray">TEXT HERE</a>
1. <a
href="#" class="button blue medium">TEXT HERE</a>
2. <a
href="#" class="button green medium">TEXT HERE</a>
3. <a
href="#" class="button orange medium">TEXT
HERE</a>
4. <a
href="#" class="button gray medium">TEXT HERE</a>
HTML
For Small Button (Choose anyone according to button color)
1. <a
href="#" class="button small blue">TEXT HERE</a>
2. <a href="#"
class="button small green">TEXT HERE</a>
3. <a
href="#" class="button small orange">TEXT HERE</a>
4. <a
href="#" class="button small gray">TEXT HERE</a>
HTML For Small
Rounded Buttons (Choose anyone according to button color)
1. <a
href="#" class="button small blue rounded">TEXT
HERE</a>
2. <a
href="#" class="button small green rounded">TEXT
HERE</a>
3. <a
href="#" class="button small orange rounded">TEXT
HERE</a>
4. <a href="#" class="button small gray
rounded">TEXT HERE</a>
Customization:
1. Replace # with the link which you want to add
it to button.
2. Replace TEXT HERE
with your text.
These animated
bubble buttons are made with pure CSS3 and on mouse hover the bubble star
shaking and this effect makes these button more beautiful. This button is
available in four different color themes and three sizes so that you can add
any button of any size just by changing the class name of button.
.png)
0 comments:
Post a Comment