Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use pure CSS3 to achieve animation button effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

HTML Code:

Download

Click to begin

1.2MB .zip

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-serif

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-gradient (linear, left top, left bottom, color-stop (0% meme 00b7ea), color-stop (100% meme 009ec3); / * Chrome,Safari4+ * /

Background:-webkit-linear-gradient (top, # 00b7ea 0% focus 009ec3100%); / * Chrome10+,Safari5.1+ * /

Background:-o-linear-gradient (top, # 00b7ea 0% focus 009ec3%); / * Opera 11.10 + * /

Background:-ms-linear-gradient (top, # 00b7ea 0% focus 009ec3100%); / * IE10+ * /

Background: linear-gradient (top, # 00b7ea 0% focus 009ec3%); / * W3C * /

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 (0pc0re0pc0pl 0.2)

-moz-box-shadow: 2px 2px 8px rgba (0pc0re0pc0pl 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% meme 00b7ea), color-stop (100% meme 009ec3); / * Chrome,Safari4+ * /

Background:-webkit-linear-gradient (top, # 00b7ea 36% focus 009ec3100%); / * Chrome10+,Safari5.1+ * /

Background:-o-linear-gradient (top, # 00b7ea 36% focus 009ec3); / * Opera 11.10 + * /

Background:-ms-linear-gradient (top, # 00b7ea 36% focus 009ec3100%); / * IE10+ * /

Background: linear-gradient (top, # 00b7ea 36% focus 009ec3%); / * W3C * /

Filter: progid:DXImageTransform.Microsoft.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

}

Thank you for reading this article carefully. I hope the article "how to use pure CSS3 to achieve animation button effect" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.