Pure CSS Animation effect button

We know that CSS3 is an upgraded version of CSS technology, and CSS3 language development is evolving towards modularity. The previous specification was too large and complex to be a module, so it was broken down into smaller modules, and more new modules were added. These modules include: Box model, List module, hyperlink mode, language module, background and border, text effect, multi-column layout, etc. This article small series and everyone to share a very good CSS3 button animation, this CSS3 button a total of 5 kinds of animation, each is a mouse slide animation form, although these animation buttons are not very gorgeous, but the small series feel not as difficult as other buttons to expand, We can modify the CSS code to change our favorite color style.

HTML code:

<div class= "Button01" >      <a href= "#" >Download</a>      <p class= "Top" >click to begin</p >      <p class= "Bottom" >1.2mb .zip</p></div>

CSS code:

. button01 {width:200px; margin:50px auto 20px Auto;}. Button01 a {display:block; height:50px; width:200px;/*type*/color:white; font:17px/50px Helvetica, Verdana, sans-s Erif; Text-decoration:none; Text-align:center; Text-transform:uppercase; /*gradient*/background: #00b7ea; /* Old browsers */background:-moz-linear-gradient (top, #00b7ea 0, #009ec3 100%);/* ff3.6+ */background:-webkit-gradi ENT (linear, left top, left bottom, Color-stop (0%, #00b7ea), Color-stop (100%, #009ec3)); /* chrome,safari4+ */background:-webkit-linear-gradient (top, #00b7ea 0, #009ec3 100%);/* chrome10+,safari5.1+ */backg Round:-o-linear-gradient (Top, #00b7ea 0, #009ec3 100%);/* Opera 11.10+ */background:-ms-linear-gradient (top, #00b7ea 0 %, #009ec3 100%); /* ie10+ */background:linear-gradient (top, #00b7ea 0, #009ec3 100%),/* * */Filter:progid:DXImageTransform.Microsoft . Gradient (startcolorstr= ' #00b7ea ', endcolorstr= ' #009ec3 ', gradienttype=0); /* ie6-9 */}.button01 A, p {-webkit-border-radius:10px;         -moz-border-radius:10px; border-radius:10px;    -webkit-box-shadow:2px 2px 8px Rgba (0,0,0,0.2);         -moz-box-shadow:2px 2px 8px Rgba (0,0,0,0.2); box-shadow:2px 2px 8px Rgba (0,0,0,0.2);}  p {background: #222; display:block; height:40px; width:180px; Margin: -50px 0 0 10px; /*type*/Text-align:center; font:12px/45px Helvetica, Verdana, Sans-serif; Color: #fff; /*position*/Position:absolute; Z-index:-1;    /*transition*/-webkit-transition:margin 0.5s Ease;      -moz-transition:margin 0.5s Ease;     -o-transition:margin 0.5s Ease;         -ms-transition:margin 0.5s Ease; Transition:margin 0.5s Ease;} /*hover*/.button01:hover. Bottom {margin: -10px 0 0 10px;}. Button01:hover. Top {margin: -80px 0 0 10px; line-height:35px;}  /*active*/.button01 a:active {background: #00b7ea;/* Old browsers */background:-moz-linear-gradient (top, #00b7ea 36%, #009ec3 100%); /* ff3.6+ */background:-webkit-gradient (linear, left top, left bottom, Color-stoP (36%, #00b7ea), Color-stop (100%, #009ec3)); /* chrome,safari4+ */background:-webkit-linear-gradient (top, #00b7ea 36%, #009ec3 100%);/* chrome10+,safari5.1+ */back Ground:-o-linear-gradient (Top, #00b7ea 36%, #009ec3 100%);/* Opera 11.10+ */background:-ms-linear-gradient (top, #00b7 EA 36%, #009ec3 100%); /* ie10+ */background:linear-gradient (top, #00b7ea 36%, #009ec3 100%),/* * */Filter:progid:DXImageTransform.Microso Ft.gradient (startcolorstr= ' #00b7ea ', endcolorstr= ' #009ec3 ', gradienttype=0); /* ie6-9 */}.button01:active. Bottom {margin: -20px 0 0 10px;}. Button01:active. Top {margin: -70px 0 0 10px;

Style Show:

The above is just a picture display, tall on the Click button Effect, we can learn from the above code to try it.