CSS3 Animated Bubble Buttons For Blogger

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

This Tutorial is about animated CSS3 bubble buttons for blogger. Actually these animated bubble buttons were designed by tutorialzine.com. All buttons are made with pure CSS3 and on mouse hover the bubbles start shaking, that is a worth seeing effect on buttons. This buttons are available in four color themes and four sizes. So you can use any size of button according to your blog style. You also can add buttons in WordPress but you have to embed CSS codes in your WordPress site. These buttons are actually used as Demo, Download and many other buttons in blog post

When i was searching for these bubble buttons for my blog, i found nothing. Bloggers posted on it but their CSS3 codes were not working. Finally i found a script and edited the code and finally it worked. Here is a demo of CSS3 animated bubble button

View Demo

CSS3 Code Add

Go to Blogger Dashboard → Design → Edit HTML

Now find the following code using F3

<head>

Now add the following CSS code just after <head>

Actually above CSS code really too much huge at the same time you have to keep your template clean, so i kept the CSS3 code short

HTML Codes

Now you have to paste HTML code in your blogger post. There are Big, Medium, Small and Round shaped button. Use them as your choice.

Big Buttons

<a href="#" class="button big blue">Big Button</a>
<a href="#" class="button big green">Big Button</a>
<a href="#" class="button big orange">Big Button</a>
<a href="#" class="button big gray">Big Button</a>

Medium Buttons

<a href="#" class="button blue medium">Medium Button</a>
<a href="#" class="button green medium">Medium Button</a>
<a href="#" class="button orange medium">Medium Button</a>
<a href="#" class="button gray medium">Medium Button</a>

Small Buttons

<a href="#" class="button small blue">Small Button</a>
<a href="#" class="button small green">Small Button</a>
<a href="#" class="button small orange">Small Button</a>
<a href="#" class="button small gray">Small Button</a>

Round Shaped Buttons

<a href="#" class="button small green rounded">Rounded</a>
<a href="#" class="button small blue rounded">Rounded</a>

If you want to show the bubble in middle position then use this html tag <center>YOUR BUTTON CODE</center>

Now all you have to do is to place your link and link text. That's all folks. I made the article with much difficulties. If you liked the article you are warmly requested to share. Only your appreciations can encourage us to continue

View Demo