Lively CSS 3 dynamic bubble button making

This time, we are creating a useful set of animated buttons with multiple backgrounds and animations on CSS3. With this button package, you can easily turn into an animated button, and any link on your Web page just specifies a class name. There is no need for JavaScript. Four-color themes and three sizes can also be assigned by assigning additional class names. Mengjin County Second Medium

To open a general link on a webpage into a fancy animated CSS3 button, you only need to specify the button class and one of the supported colors. See below for some examples:

View Source print?

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 – blue, green, orange and grey. The rest of the classes that you see are assigned to the above link, which is optional. You can choose from small, medium, large, class – rounded, it creates a more rounded version of the button.

The CSS code for all animated buttons resides in the Buttons.css. This makes it easy to drop to an existing project and use it.

Please note that throughout the code below, I have defined two versions of the same property in some places. This is the way the browser handles CSS definitions. They parse the rules and apply them, ignoring what they don't understand. So that we can have an understanding of all the rules, which is the normal version, a CSS3 enabled, will be old ignored.

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

The first is the font-related style, after which the properties are displayed as follows. It is set to Inline–block, which makes it possible to sit on the same line of text around it (such as inline elements), but also like a facet of padding and margin blocks.

At some point, you'll see that each button has four background images applied to it. Although this sounds scary, there is only one file that is actually required from the server. The first two backgrounds, the bottom left and the upper right part of the bubble image, you can see the following illustrations, and the other two is a pure CSS gradient.

As I mentioned above, the background of the bubble is displayed as two separate images, with the offset of the background position property. Using the CSS3 transition properties, we define the animation, in which two versions of the background picture slides at the top or bottom respectfully, you see the hover button when the foam effect occurs.

View Source print?

01	/* BlueButton */

02

03	.blue.button{

04	color:#0f4b6d!important;

05

06	border:1pxsolid #84acc3!important;

07

08	/* A fallback background color */

09	background-color: #48b5f2;

10

11	/* Specifying a version with gradients according to */

12

"	;  background-image :    url ( "Button_ Bg.png ' url ( ' button_bg.png ' ),

14	-moz-radial-gradient(    centerbottom, circle,

15	rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),

16	-moz-linear-gradient(#4fbbf7, #3faeeb);

17

"	;  background-image :    url ( "Button_ Bg.png ' url ( ' button_bg.png ' ),

;                       -webkit-gradient (    radial, 50% 100% , 0 50% 100% 100

;                                            from (Rgba ( 89 208 244 1 89 Code class= "CSS value" >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

"	;  background-image :    url ( "Button_ Bg.png ' url ( ' button_bg.png ' ),

28	-moz-radial-gradient(    centerbottom, circle,

29	rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),

30	-moz-linear-gradient(#63c7fe, #58bef7);

31

[	;  background-image :    url ( "Button_ Bg.png ' url ( ' button_bg.png ' ),

"	;                       -webkit-gradient (    radial, 50% 100% , 0 50% 100% 100

"	;                                            from (Rgba ( 109 217 250 1 109 Code class= "CSS value" >217 250 , 0

35	-webkit-gradient(linear, 0%0%, 0%100%, from(#63c7fe), to(#58bef7));

36

}

Each color class defines a unique set of unique properties – the color of the button's text label, the text shadow, and the background image. Note that we use the background Properties button to add multiple images. They are the top of the hierarchy, which first appears in the definition above.

Only Mozilla and WebKit browsers currently support CSS gradients, but with a completely different syntax. The remaining browsers will display the background color of the fallback. You may have noticed that we do not include a prefix for a free version of the gradient rule. This is due to the fact that the gradient is not yet formally part of a CSS specification, and there is no preferred syntax protocol.

In the above fragment, you can see that we define one of the linear gradients and radial on top of it. In order to make the gradient blend more smoothly with WebKit and Mozilla's syntax, we define one of the RGBA radial colors that make the gradient color completely transparent outside.

With this, our CSS3 animated foam button is done!

Summarize

These buttons are completely CSS based and the integration is very simple – just drop the button folder somewhere in your project. By modifying the CSS file, you can create your own colors and shapes.

Lively CSS 3 dynamic bubble button making