Animated Bubble Buttons Using CSS3 On Blogger

I'm sure my last tutorial about "Text with Moving Backgrounds" was quite complex. It would have been very difficult for the newbies to get hold of. So, I thought I should come up with a simple, yet stunning design tutorial that even the newbies can enjoy about. Well, that idea drove to me to present you this tutorial about "Animated Bubble Buttons Using CSS3". Take a look at the demo below.

LIVE DEMO LIVE DEMO LIVE DEMO

Hit any of the buttons above to check the other styles as well. I think, I need not explain more about the effect that you'll be able to achieve on completing this tutorial. It's pretty clear from the demo button / link above. I wish to let you know that these effects are visible only on browsers that support CSS3. However, we've incorporated a fall back color with the bubble effect for browsers that do not support CSS3 thereby, preventing your design from causing various layout issues.

Enough of stories I guess! So, let me start with the tutorial. I'll split the tutorial into 2 parts - HTML and CSS. The HTML involved behind these buttons are very simple. You need to add a corresponding class (based on the size and the color of button) to the anchor tag. Just use the following tags anywhere in your template - anywhere between your body tags.

HTML FOR LARGE SIZED BUTTONS (USE ANYONE BASED ON COLOR)

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

HTML FOR MEDIUM SIZED BUTTONS (USE ANYONE BASED ON COLOR)

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

HTML FOR SMALL SIZED BUTTONS (USE ANYONE BASED ON COLOR)

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

Note: Replace LINK with the link you wish to point to. Similarly, LINKNAME with the name/title of your link.

The CSS involved behind these buttons are pretty complex. I don't want to explain in detail about the same and confuse you - especially, if you are a newbie. So, just download this file - CSS FOR ANIMATED BUBBLE BUTTONS, and paste the code present in it just above/before skin in your blogger template and save your template. That's it!

Well, if your a CSS geek, then you may tweak the CSS mentioned in the text doc above to add further effects. The content mentioned in the text document involves the CSS for all types of buttons - be it any size or color. If you are one, who is obsessed with reducing the load time of your site (like me), then define the CSS only for those buttons you intend to use. For further assistance or suggestions about this article, leave a comment below.
Design Inspiration - Tutorialzine.

Enjoyed the article?

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Other Recommended Posts

nobord3r said on August 29, 2011 at 4:03 PM :

Great post as always Makund.
I wonder if it possible to apply that button for "Read more" option on every post in home page.

Mukund said on August 29, 2011 at 4:15 PM :

@nobord3r: Well, why not? You can install this for your read more buttons! Just look for the anchor tag which is linked to text read more on your blog. Then, add the class of your choice to the tag and your done:) Thanks for the comment and my name is Mukund, not Makund:)

nobord3r said on August 29, 2011 at 4:24 PM :

@Mukund

...and my name is Mukund, not Makund:)

Of course, I apologise.

benooi said on August 29, 2011 at 7:32 PM :

WOW! This is so cool. Im sure I'll need this once day soon.

Mukund said on August 29, 2011 at 7:42 PM :

@benooi: Yup! Let me know once you make use of them! I would love to see them live on your blog:)

Vamsi@HoverPcHacks said on August 29, 2011 at 10:05 PM :

Hello Bro,
Good to see you with this awesome tutorial.... Keep going bro.

Mukund said on August 29, 2011 at 11:17 PM :

@Vamsi@HoverPcHacks: Yup! I'm happy to see your comment - probably after a long time on my blog:) Thanks for the comment:)

Andrelle said on August 30, 2011 at 2:41 AM :

This is cool I just finished creating an e-book for my blog. Having a button like this saying DOWNLOAD will definitely let users click.

Mohammad

No words for thanks just super awesome!

Mukund said on August 31, 2011 at 1:07 AM :

@Andrelle: Well, exactly! It'll definitely drive people to download your ebook. Nevertheless, look stylish and cool on your design:) Thanks for the comment buddy!

Mukund said on August 31, 2011 at 1:08 AM :

@Mohammad: Thanks for the comment Mohammad! I hope you enjoy the upcoming articles as well:)

gamep01nt said on August 31, 2011 at 7:21 AM :

u article is always a quality one. pure idea. LOVE it! Will try this one too. Thanks Mukund

Mukund said on August 31, 2011 at 9:40 AM :

@gamep01nt: Yup! Thanks for the comment buddy! I hope you enjoy the upcoming articles as well:)

Ankit

Really it is beautiful tips, i applied on my blog. you can see here - Www.smstimepass.blogspot.com

Mukund said on August 31, 2011 at 10:22 AM :

@Ankit: Yup! I had a look at them on your sidebar! I hope you enjoy the upcoming tutorials as well:)

Beben Koben said on August 31, 2011 at 1:04 PM :

so cool...but!

I think you are too many variables to apply background-image

thank's for coded ;)

Mukund said on August 31, 2011 at 3:05 PM :

@Beben Koben: Thanks for the comment buddy! Yes! I've used two bg images and you'll probably find it little complex. However, both the images are the same. Just the positioning is different! So, faster loading is guaranteed!

Beben Koben said on August 31, 2011 at 6:30 PM :

@Mukund i see master Mukund, there is any radial and linear gradient ☺
Share master in my blog :D :P
Your blog full stylish ^_+

Cheers (^_^)

AndroidHogger said on September 1, 2011 at 9:04 AM :

They look so good. Do you have similar one for WP?

Mukund said on September 1, 2011 at 6:24 PM :

@AndroidHogger: They can be used on WordPress as well! Just upload the content in the CSS file to your custom.css file and use the HTML anywhere in your WP theme! You should be able to see the buttons:) Thanks for the comment buddy!

Vamsi@HoverPcHacks said on September 1, 2011 at 9:17 PM :

@Mukund: Yep!!! its been a long time since my last visit, I'm pretty busy with my on going term examinations. Last but not least, You made some awesome changes to your template... & I think its time to tweak my template too ;)

Guduru Pradeep Kumar said on September 2, 2011 at 3:56 PM :

Thanks for sharing nice buttons. Keep it up mukund.

Ladida said on September 9, 2011 at 2:53 PM :

woww, it's nice!!

do you use background position here?

Mukund said on September 9, 2011 at 3:25 PM :

@Ladida: Yes! I use background position for the hover state. Thanks for the comment! Hope you enjoy the other articles on my blog as well:)

Ricardo said on October 26, 2011 at 8:27 PM :

Okay, I love those buttons.
Installed them in my blog, but I can't use them in the read more option. I'm kind of a noob with coding and sucs, but I cant seem to make that work no matter wat. could you give me some help Mukund?

Mukund said on October 28, 2011 at 1:25 AM :

@Ricardo: Yes! Why not! I would love to! Just hit me via gmail and I'll help you out!

digitfox said on November 9, 2011 at 8:03 PM :

Thanks your awesome posts............very useful.Liked

Vangelis said on December 2, 2011 at 5:03 PM :

Very nice tip Mukund,keep up the good work,greetings from Greece

Венцислав Сотиров said on January 13, 2012 at 7:51 PM :

Where exactly should I place the CSS code? Because to me it is not received :(

atulquest99 said on February 4, 2012 at 1:53 PM :

I have pasted the CSS below body of template, and tried the html with my poosts in HTML mode.,, it dosen;t work. A link generated which dosen;t animate.

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT