The HTML
To turn a regular link on your page into a fancy animated CSS3 button, you just need to assign the .buttonclass and one of the supported colors. See some examples below:
1 |
<a href="#" class="button blue big">Download</a> |
2 |
<a href="#" class="button blue medium">Submit</a> |
3 |
<a href="#" class="button small blue rounded">Submit</a> |
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.
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 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
02 |
font:15px Calibri, Arial, sans-serif; |
05 |
text-shadow:1px 1px 0 rgba(255,255,255,0.4); |
08 |
text-decoration:none !important; |
12 |
vertical-align:baseline; |
17 |
background-repeat:no-repeat; |
22 |
background-position:bottom left; |
23 |
background-image:url('button_bg.png'); |
28 |
background-position:bottom left, top right, 0 0, 0 0; |
29 |
background-clip:border-box; |
33 |
-moz-border-radius:8px; |
34 |
-webkit-border-radius:8px; |
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; |
46 |
-webkit-transition:background-position 1s; |
47 |
-moz-transition:background-position 1s; |
48 |
-o-transition:background-position 1s; |
49 |
transition:background-position 1s; |
58 |
background-position:top left; |
59 |
background-position:top left, bottom right, 0 0, 0 0; |
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 inline-block, 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.
03 |
.button.big { font-size:30px;} |
04 |
.button.medium { font-size:18px;} |
05 |
.button.small { font-size:13px;} |
10 |
-moz-border-radius:4em; |
11 |
-webkit-border-radius:4em; |
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.
04 |
color:#0f4b6d !important; |
06 |
border:1px solid #84acc3 !important; |
09 |
background-color: #48b5f2; |
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); |
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)); |
25 |
background-color:#63c7fe; |
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); |
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)); |
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!
Parting words
These buttons are entirely CSS based and integrating them is extremely simple – just drop the buttons folder somewhere in your project. You can create your own colors and shapes by modifying the CSS file.
視覺相關 (4)