Implementation of html5 and css3 dynamic bubble button

We are creating a useful set of animated buttons with the power of multiple backgrounds and animations in CSS3, without using JavaScript, with this button pack you can easily turn anything on your web page into an animated button The link just specifies a class name, friends who need it can refer to

This time, we are creating a useful setting to animate buttons with the power of multiple backgrounds and animations of CSS3. With this button pack you can easily turn any link on your web page into an animated button by just specifying a class name. No JavaScript necessary. Four color themes and three sizes are also available by assigning additional class names.
To turn a regular link on a web page into a fancy animated CSS3 button, you just need to specify the button class and one of the supported colors. See some examples below:

<a href="#" class="button blue big">Download</a> 
<a href="#" class="button blue medium">Submit</a> 
<a href="#" class="button small blue rounded">Submit</a>

There are four color classes – blue, green, orange and gray. The rest of the classes you see assigned to the link above are optional. You can choose from small, medium, and large sizes, and one category – Rounded, which creates a more rounded version of the button.
Effect Demonstration
It is recommended to use standard browsers such as Chrome and Firefox to view the effect. Even IE 9 has some incompatibilities.

The CSS code for all animated buttons resides in buttons.css. This makes it easy to drop into 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 has to do with the way browsers handle CSS definitions. They parse the rules one by one and apply them, ignoring what they don't understand. This way we can have an understanding of all the rules, which is the normal version, and a CSS3 enabled one that will ignore the old ones.
The first thing we need to do is define the button class. This is the backbone of the button as it applies positioning, fonts and background styles.
The first is the style related to the font, after which the properties are displayed as follows. It is set up as an inline-block, which allows it to sit on the same line as the text around it (like an inline element), but also like an aspect block with padding and margins.
At one point you will see that each button has four background images applied to it. While this sounds scary, only one file is actually requested from the server. The first two backgrounds, the lower left and upper right sections are bubble images, which you can see in the illustration below, and the other two are pure CSS gradients.
As I mentioned above, the background of the bubble is displayed as two separate images, offset by the background position property. Using the CSS3 transition property, we defined animations that would have both versions of the background image at the top or bottom of the slide, creating a bubble effect when you see the button hovered.

/* BlueButton */ 
.blue.button{ 
color:#0f4b6d !important; 
border:1px solid #84acc3 !important; 
/* A fallback background color */ 
background-color: #48b5f2; 
/* Specifying a version with gradients according to */ 
background-image: url('button_bg.png'), url('button_bg.png'), 
-moz-radial-gradient( center bottom, circle, 
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), 
-moz-linear-gradient(#4fbbf7, #3faeeb); 
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)), to(rgba(89,208,244,0))), 
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); 
} 
.blue.button:hover{ 
background-color:#63c7fe; 
background-image: url('button_bg.png'), url('button_bg.png'), 
-moz-radial-gradient( center bottom, circle, 
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px), 
-moz-linear-gradient(#63c7fe, #58bef7); 
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)), to(rgba(109,217,250,0))), 
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); 
}

Each color class defines a unique set of unique properties – the color of the button’s text label, text shadow and background image. Notice that we used the Background property button to add multiple images. They are the top of the hierarchy, appearing first and being defined above.
Only Mozilla and Webkit browsers currently support CSS gradients, but with completely different syntax. The remaining browsers will display the fallback background color. You may have noticed that we did not include a prefix for the free version of the gradient rules. This is due to the fact that gradients are not officially part of a CSS specification yet, and there is no preferred syntax protocol.
In the snippet above, you can see that we defined a linear gradient and a radial one above it. To make the gradient blend more smoothly with WebKit and Mozilla syntax, we define one of the RGBA radials, which makes the outer color of the gradient completely transparent.
With this, our CSS3 animated bubble button is complete!
Summary
These buttons are completely based on CSS and integration is very simple – just drop the buttons folder somewhere in your project. By modifying CSS files, you can create your own colors and shapes.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

H5 implements the function code of uploading local images and being able to preview them

How to set up CSS Text font color

The above is the detailed content of Implementation of html5 and css3 dynamic bubble button. For more information, please follow other related articles on the PHP Chinese website!