Animated Bubble Buttons Using CSS3 On Blogger

bubble-buttons
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.


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?
Subscribe to this Blog via Email:

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!

    Other Recommended Posts

  • Blogger Tutorials, CSS Tricks
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.

REPLY
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:)

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

@Mukund

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

Of course, I apologise.

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

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

REPLY
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:)

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

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

REPLY
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:)

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

REPLY
Mohammad

No words for thanks just super awesome!

REPLY
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!

REPLY
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:)

REPLY
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

REPLY
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:)

REPLY
Ankit

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

REPLY
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:)

REPLY
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 ;)

REPLY
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!

REPLY
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 (^_^)

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

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

REPLY
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!

REPLY
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 ;)

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

Thanks for sharing nice buttons. Keep it up mukund.

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

woww, it's nice!!

do you use background position here?

REPLY
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:)

REPLY
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?

REPLY
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!

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

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

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

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

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

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

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

REPLY

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

[netinsert=0.0.1.11.14.1]