How to Add Animated CSS3 Bubble Buttons For Blogger

How to Add Animated CSS3 Bubble Buttons For Blogger

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 > >Dashboard.

2. Click on Drop Down Menu and Select Template.

3. Backup your Template before making any changes to your blog.

4. Now Click on Edit HTML.

5. Press Ctrl + F and search the code shown below.   

  ]]></b:skin>

Add below code before: ]]></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/AVvXsEhyxdVojUVP4xujYC7CHZbdr83QSBXZbW__xbtMSFY58xs-c4NMX_r59Et7xYDFzIVi0mooThaneedDGSgxCXAaf1rlxWNUVpknoiGr500aOdccT5T4wg_vqnA6BJqC8HnvKxS1OJMRjyEO/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/AVvXsEhyxdVojUVP4xujYC7CHZbdr83QSBXZbW__xbtMSFY58xs-c4NMX_r59Et7xYDFzIVi0mooThaneedDGSgxCXAaf1rlxWNUVpknoiGr500aOdccT5T4wg_vqnA6BJqC8HnvKxS1OJMRjyEO/s1600/bloghelpstreet.blogspot.com-button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyxdVojUVP4xujYC7CHZbdr83QSBXZbW__xbtMSFY58xs-c4NMX_r59Et7xYDFzIVi0mooThaneedDGSgxCXAaf1rlxWNUVpknoiGr500aOdccT5T4wg_vqnA6BJqC8HnvKxS1OJMRjyEO/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/AVvXsEhyxdVojUVP4xujYC7CHZbdr83QSBXZbW__xbtMSFY58xs-c4NMX_r59Et7xYDFzIVi0mooThaneedDGSgxCXAaf1rlxWNUVpknoiGr500aOdccT5T4wg_vqnA6BJqC8HnvKxS1OJMRjyEO/s1600/bloghelpstreet.blogspot.com-button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyxdVojUVP4xujYC7CHZbdr83QSBXZbW__xbtMSFY58xs-c4NMX_r59Et7xYDFzIVi0mooThaneedDGSgxCXAaf1rlxWNUVpknoiGr500aOdccT5T4wg_vqnA6BJqC8HnvKxS1OJMRjyEO/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/AVvXsEhyxdVojUVP4xujYC7CHZbdr83QSBXZbW__xbtMSFY58xs-c4NMX_r59Et7xYDFzIVi0mooThaneedDGSgxCXAaf1rlxWNUVpknoiGr500aOdccT5T4wg_vqnA6BJqC8HnvKxS1OJMRjyEO/s1600/bloghelpstreet.blogspot.com-button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyxdVojUVP4xujYC7CHZbdr83QSBXZbW__xbtMSFY58xs-c4NMX_r59Et7xYDFzIVi0mooThaneedDGSgxCXAaf1rlxWNUVpknoiGr500aOdccT5T4wg_vqnA6BJqC8HnvKxS1OJMRjyEO/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/AVvXsEhyxdVojUVP4xujYC7CHZbdr83QSBXZbW__xbtMSFY58xs-c4NMX_r59Et7xYDFzIVi0mooThaneedDGSgxCXAaf1rlxWNUVpknoiGr500aOdccT5T4wg_vqnA6BJqC8HnvKxS1OJMRjyEO/

go to link download