青海湖天府大酒店:CSS3 Animated Bubble Buttons | Tutorialzine

CSS3 Animated Bubble Buttons
Posted by Martin Angelov on Oct 4th, 2010 inCSS
DemoDownload
This week we are creating a useful set of animated buttons withthe power of CSS3′s multiple backgrounds and animations. With thisbutton pack, you can easily turn any link on your page into an animatedbutton by just assigning a class name. No JavaScript necessary. Fourcolor themes and three sizes are also available by assigning additionalclass 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:
1 Download
2 Submit
3 Submit
There are four color classes available – blue, green, orange andgray. The rest of the classes, which you see assigned to the linksabove, are optional. You can choose a size from small, medium and big,and one more class – rounded, which creates a more rounded version ofthe button.
The class names are chosen so they are straightforward and easy toremember, but this raises the possibility of a clash with some of theclasses on your page.
If, when implementing the buttons, younotice that they don’t look right, try changing the class names from“blue”, “big”, “rounded” etc. into something more unique. You’d need tomodify buttons.css to do this.
Now lets take a closer look at the CSS classes that make this possible.

CSS3 Animated Buttons
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 versionsof the same property in a number of places. This has to do with the waybrowsers handle CSS definitions. They parse the rules one by one andapply them, ignoring the ones they do not understand. This way we canhave a plain version of the rule which is understandable by all, and aCSS3 enabled one which will be ignored by the older ones.
buttons/buttons.css
01 .button{
02     font:15px Calibri, Arial, sans-serif;
03
04     /* A semi-transparent text shadow */
05     text-shadow:1px 1px 0 rgba(255,255,255,0.4);
06
07     /* Overriding the default underline styling of the links */
08     text-decoration:none !important;
09     white-space:nowrap;
10
11     display:inline-block;
12     vertical-align:baseline;
13     position:relative;
14     cursor:pointer;
15     padding:10px 20px;
16
17     background-repeat:no-repeat;
18
19     /* The following two rules are fallbacks, in case
20        the browser does not support multiple backgrounds. */
21
22     background-position:bottom left;
23     background-image:url('button_bg.png');
24
25     /* CSS3 background positioning property with multiple values. The background
26        images themselves are defined in the individual color classes */
27
28     background-position:bottom left, top right, 0 0, 0 0;
29     background-clip:border-box;
30
31     /* Applying a default border radius of 8px */
32
33     -moz-border-radius:8px;
34     -webkit-border-radius:8px;
35     border-radius:8px;
36
37     /* A 1px highlight inside of the button */
38
39     -moz-box-shadow:0 0 1px #fff inset;
40     -webkit-box-shadow:0 0 1px #fff inset;
41     box-shadow:0 0 1px #fff inset;
42
43     /* Animating the background positions with CSS3 */
44     /* Currently works only in Safari/Chrome */
45
46     -webkit-transition:background-position 1s;
47     -moz-transition:background-position 1s;
48     -o-transition:background-position 1s;
49     transition:background-position 1s;
50 }
51
52 .button:hover{
53
54     /* The first rule is a fallback, in case the browser
55        does not support multiple backgrounds
56     */
57
58     background-position:top left;
59     background-position:top left, bottom right, 0 0, 0 0;
60 }
The first thing we need to do is to define the button class. This isthe backbone of the buttons as it applies positioning, font andbackground styles.
First are the font-related styles, after which follows the display property. It is set to inline-block ,which allows it to sit on the same line as its surrounding text (likean inline element would), but also behave like a block in regard to thepaddings and margins.
As you will see in a moment, each button has four background imagesapplied to it. Although this sounds intimidating, only one file isactually requested from the server. The first two backgrounds are thebottom left and top right part of the bubble image, which you can see inthe illustration below, and the other two are pure CSS gradients.

Bubble Background
As I mentioned above, the bubble background is displayed as twoindividual images, offset with the background-position property. Usingthe CSS3 transition property, we define an animation in which the twoversions of the background image slide to the top or bottomrespectfully, which creates the bubble effect you see when hovering overthe buttons.
Now lets say a few words about the size and rounded classes.
01 /* The three buttons sizes */
02
03 .button.big        { font-size:30px;}
04 .button.medium    { font-size:18px;}
05 .button.small    { font-size:13px;}
06
07 /* A more rounded button */
08
09 .button.rounded{
10     -moz-border-radius:4em;
11     -webkit-border-radius:4em;
12     border-radius:4em;
13 }
Here are the three size classes – small, medium and big, and therounded class. The buttons scale according to their text size. This wayno explicit width and height has to be specified.
Now lets move on with the interesting part – the colors. Only thedefinition for the blue button is given below, as the rest are nearlyidentical.
01 /* BlueButton */
02
03 .blue.button{
04     color:#0f4b6d !important;
05
06     border:1px solid #84acc3 !important;
07
08     /* A fallback background color */
09     background-color: #48b5f2;
10
11     /* Specifying a version with gradients according to */
12
13     background-image:    url('button_bg.png'), url('button_bg.png'),
14                         -moz-radial-gradient(    center bottom, circle,
15                                                 rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
16                         -moz-linear-gradient(#4fbbf7, #3faeeb);
17
18     background-image:    url('button_bg.png'), url('button_bg.png'),
19                         -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
20                                             from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
21                         -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
22 }
23
24 .blue.button:hover{
25     background-color:#63c7fe;
26
27     background-image:    url('button_bg.png'), url('button_bg.png'),
28                         -moz-radial-gradient(    center bottom, circle,
29                                            rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
30                         -moz-linear-gradient(#63c7fe, #58bef7);
31
32     background-image:    url('button_bg.png'), url('button_bg.png'),
33                         -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
34                                             from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
35                         -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
36 }
Each color class defines a unique unique set of properties – thecolor of the buttons’ textual label, a text-shadow and a set ofbackground images. Notice that we use the background property to addmultiple 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 willdisplay the fallback background color. You may have noticed that we arenot including a prefix-free version of the gradient rules. This is dueto the fact that gradients are not an official part of the CSSspecification as of yet, and there is no agreement on the preferredsyntax.
In the fragment above, you can see that we are defining a lineargradient and a radial one on top of it. To make the gradients blend moresmoothly, in both the webkit and mozilla syntaxes we are defining theradial one with RGBA, which makes the outer color of the gradientcompletely transparent.
With this our CSS3 animated bubble buttons are complete!
Parting words
These buttons are entirely CSS based and integrating them isextremely simple – just drop the buttons folder somewhere in yourproject. You can create your own colors and shapes by modifying the CSSfile.