Animated CSS3 Bubble Buttons For Blogger

Today we will add some cool CSS3 bubble buttons to blogger blog which are designed byTutorialZine.These 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 color themes and three sizes so that you can add any button of any size just by just changing the class name of button.

Live Demo

How To Add Animated CSS3 Bubble Buttons To Blogger

For easy and better inderstanding here I am dividing this article in two parts.

1. CSS Part
2. HTML Part

1. CSS Part

1. Go to Blogger Dashboard > Template
2. As always take a backup of your template
3. Search for below code in your template

</b:skin>

 The code is too big to be displayed here. Go to the below link and copy the code from there. 

• Go here

Add the copied code  above </b:skin> 

Now we have integrated the CSS part in the template let's see how to use them.

2. HTML Part


Here I am listing button's HTML part according to their sizes.First choose size of button then choose color of button.

1.HTML For Big Button (Choose anyone according to button color)

<a href="LINK HERE" class="button big blue">TEXT HERE</a>
<a href="LINK HERE" class="button big green">TEXT HERE</a>
<a href="LINK HERE" class="button big orange">TEXT HERE</a>
<a href="LINK HERE" class="button big gray">TEXT HERE</a>

2.HTML For Medium Button (Choose anyone according to button color)

<a href="LINK HERE" class="button blue medium">TEXT HERE</a>
<a href="LINK HERE" class="button green medium">TEXT HERE</a>
<a href="LINK HERE" class="button orange medium">TEXT HERE</a>
<a href="LINK HERE" class="button gray medium">TEXT HERE</a>

3.HTML For Small Button (Choose anyone according to button color)

<a href="LINK HERE" class="button small blue">TEXT HERE</a>
<a href="LINK HERE" class="button small green">TEXT HERE</a>
<a href="LINK HERE" class="button small orange">TEXT HERE</a>
<a href="LINK HERE" class="button small gray">TEXT HERE</a>

4.HTML For Small Rounded Buttons (Choose anyone according to button color)

<a href="LINK HERE" class="button small blue rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small green rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small orange rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small gray rounded">TEXT HERE</a>

Now replace "LINK HERE" with the link which you want to add it to button and replace "TEXT HERE" with the text which you want to appear on your button.

That's all.I hope you will like these button.

Follow @shipsocker

Stay Connected With Free Updates

Subscribe via Email