Home / Tutorials / Create CSS3 Animated Bubble Buttons

Create CSS3 Animated Bubble Buttons

View DemoDownload

We are going to create useful set of animated buttons with the power of CSS3′s multiple backgrounds and animations. With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary. Four color themes and three sizes are also available by assigning additional class names.

The HTML

To turn a regular link on your page into a fancy animated CSS3 button, you just need to assign the
.button class and one of the supported colors. See some examples below:

There are four color classes available – blue, green, orange and gray. The rest of the classes, which you see assigned to the links above, are optional. You can choose a size from small, medium and big, and one more class – rounded, which creates a more rounded version of the button.

The class names are chosen so they are straightforward and easy to remember, but this raises the possibility of a clash with some of the classes on your page.

If, when implementing the buttons, you notice that they don’t look right, try changing the class names from “blue”, “big”, “rounded” etc. into something more unique. You’d need to modify
buttons.css
to do this.

Now lets take a closer look at the CSS classes that make this possible.

The CSS

All the CSS code for the animated buttons resides in
buttons.css
. This makes it easy to just drop it into an existing project and use it.

Notice that throughout the the code below, I’ve defined two versions of the same property in a number of places. This has to do with the way browsers handle CSS definitions. They parse the rules one by one and apply them, ignoring the ones they do not understand. This way we can have a plain version of the rule which is understandable by all, and a CSS3 enabled one which will be ignored by the older ones.

buttons/buttons.css

The first thing we need to do is to define the button class. This is the backbone of the buttons as it applies positioning, font and background styles.

First are the font-related styles, after which follows the display property. It is set to

, which allows it to sit on the same line as its surrounding text (like an inline element would), but also behave like a block in regard to the paddings and margins.

As you will see in a moment, each button has four background images applied to it. Although this sounds intimidating, only one file is actually requested from the server. The first two backgrounds are the bottom left and top right part of the bubble image, which you can see in the illustration below, and the other two are pure CSS gradients.

Bubble Background

As I mentioned above, the bubble background is displayed as two individual images, offset with the background-position property. Using the CSS3 transition property, we define an animation in which the two versions of the background image slide to the top or bottom respectfully, which creates the bubble effect you see when hovering over the buttons.

Now lets say a few words about the size and rounded classes.

Here are the three size classes – small, medium and big, and the rounded class. The buttons scale according to their text size. This way no explicit width and height has to be specified.

Now lets move on with the interesting part – the colors. Only the definition for the blue button is given below, as the rest are nearly identical.

Each color class defines a unique unique set of properties – the color of the buttons’ textual label, a text-shadow and a set of background images. Notice that we use the background property to add multiple images to the button. They are layered one on top of the other, with the ones defined first appearing on the top.

Only Mozilla and Webkit browsers support CSS gradients at the moment, but with quite different syntaxes. The rest of the browsers will display the fallback background color. You may have noticed that we are not including a prefix-free version of the gradient rules. This is due to the fact that gradients are not an official part of the CSS specification as of yet, and there is no agreement on the preferred syntax.

In the fragment above, you can see that we are defining a linear gradient and a radial one on top of it. To make the gradients blend more smoothly, in both the webkit and mozilla syntaxes we are defining the radial one with RGBA, which makes the outer color of the gradient completely transparent.

With this our CSS3 animated bubble buttons are complete!

About cmadmin

Web Developer & Designer | Android App Developer

One comment

  1. I have been fascinated towards the animation fine art. Enjoy your website. Extremely informative. Will certainly follow you. Looking forward for info that is more excellent.

Leave a Reply

Your email address will not be published. Required fields are marked *

Login


Username
Create an Account!
Password
Forgot Password? (close)

Sign Up


Username
Email
Password
Confirm Password
Want to Login? (close)

Forget Password?


Username or Email
(close)
SHARE
OR
SUBSCRIBE
To get latest new / tutorial / technology / development information subscribe with us.
ARE YOU READY? GET IT NOW!
Lets Get Updated with latest trends & tutorials!
Your Information will never be shared with any third party.
Ready for latest tutorials & tools !
OR SUBSCRIBE WITH