Pure CSS3 Bubble Animation button Implementation Tutorial

This CSS3 animation button is very creative, the mouse when the button is not like other buttons just change the background color of the button, but there is a cool bubble animation. So stunning CSS3 animation button, this article will be the button implementation of the process and code to share to everyone, hoping to give students in learning CSS3 to bring substantial help. You can come down and look at the online demo effect:

Online Demo Source Download

Let's take a look at the button implementation of this CSS3 bubble animation, consisting mainly of HTML code and CSS code.

HTML code:

<DivID= "Buttoncontainer">    <ahref="#">Big Button</a>    <ahref="#">Big Button</a>    <ahref="#">Big Button</a>    <ahref="#">Big Button</a>    <ahref="#">Medium Button</a>    <ahref="#">Medium Button</a>    <ahref="#">Medium Button</a>    <ahref="#">Medium Button</a>    <ahref="#">Small Button</a>    <ahref="#">Small Button</a>    <ahref="#">Rounded</a>    <ahref="#">Small Button</a>    <ahref="#">Small Button</a>    <ahref="#">Rounded</a></Div>

The HTML code is relatively simple, that is, with a link to construct the button, of course, the effect of the demonstration also requires a strong CSS rendering.

The next focus is on CSS code, and first we'll render the underlying style for each button, which is common to each of the buttons:

. Button{Font:15px Calibri, Arial, Sans-serif;/*A semi-transparent text Shadow*/Text-shadow:1px 1px 0 rgba (255,255,255,0.4);/*overriding the default underline styling of the links*/text-decoration:None!important;White-space:nowrap;Display:Inline-block;vertical-align:Baseline;position:relative;cursor:Pointer;padding:10px 20px;background-repeat:no-repeat;/*the following-fallbacks, the browser does not the multiple backgrounds.*/background-position:Bottom Left;Background-image:url (' button_bg.png ');/*multiple backgrounds version. The background images is defined individually in color classes*/background-position:bottom left, top right, 0 0, 0 0;Background-clip:Border-box;/*applying a default border raidus of 8px*/-moz-border-radius:8px;-webkit-border-radius:8px;Border-radius:8px;/*A 1px highlight inside of the button*/-moz-box-shadow:0 0 1px #fff inset;-webkit-box-shadow:0 0 1px #fff inset;Box-shadow:0 0 1px #fff inset;/*animating the background positions with CSS3*/    /*currently works only in Safari/chrome*/-webkit-transition:background-position 1s;-moz-transition:background-position 1s;transition:background-position 1s;}. Button:hover{/*The first rule is a fallback, in case the browser does isn't support multiple backgrounds*/background-position:Top Left;background-position:top left, bottom right, 0 0, 0 0;}. Button:active{/*moving the button 1px to the bottom when clicked*/Bottom:-1px;}

Also defines the style of the button when the mouse is over and activated.

Finally, the bubble animation effect, we take one of the buttons as an example, the code is as follows:

. 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),-mo Z-linear-gradient (#4fbbf7, #3faeeb);Background-image:url (' button_bg.png '), url (' button_bg.png '),-webkit-gradient (radial, 50% 100%, 0, 50% 1                        00%, +, 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% 1                        00%, +, from (Rgba (109,217,250,1)), to (Rgba (109,217,250,0))), -webkit-gradient (linear, 0% 0, 0% 100%, from (#63c7fe), to (#58bef7));}

From the code we can see, when the mouse over the button, the bubble background image of the button to achieve a gradual animation effect, and a certain transparency effect, so that there is a bubble rising animation effects. All the code is like this, you can download the source code to study.

Online Demo Source Download

Pure CSS3 Bubble Animation button Implementation Tutorial