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

Today, I will talk to you about how to use the code to develop css3 animation buttons, many people may not know much about it, in order to make you understand better, the editor summarized the following, I hope you can get something according to this article.

Today I will bring you an animated button based on css3. The effect of the implementation is as follows:

The code for the implementation.

Html Code:

XML/HTML Code copies content to the clipboard

Share on twitter share on facebook Pin on pinterest share on tumblr Share on google+ Css3 code: CSS Code copies the contents to the clipboard body {background:-webkit-linear-gradient (0deg # FF8008 10%, # FFC837 90%) Background: linear-gradient (90deg, # FF8008 10%, # FFC837 90%); padding: 2em; text-align: center;} * {- moz-box-sizing: border-box; box-sizing: border-box }. Share-buttons {position: absolute; width: 300px; height: 212px; padding-left: 135px; top: 50%; left: 50%; margin-left:-150px; margin-top:-106px }. Share-buttons. Share-button {float: left; margin-top: 15px;} .share-buttons .share-button:first-child {margin-top: 0 }. Share-buttons. Share-button:after {clear: both; display: table;}. Share-button {display: block; position: relative; height: 30px } .share-button:hover {cursor: pointer;} .share-button:hover .share-button-primary {box-shadow: 1px 000 rgba (0,0,0,0.1) } .share-button:hover .share-button-secondary-content {- webkit-transform: translate3d (0,0,0); transform: translate3d (0,0,0);} .share-button-primary {position: absolute; background: # fff Width: 30px; height: 30px; border-radius: 15px; left: 0; top: 50%; margin-top:-15px;} .share-button-icon {display: block; color: # 242424 Position: absolute; width: 30px; line-height: 30px; font-size: 16px; margin-top: 1px;} .share-button-secondary {overflow: hidden; margin-left: 15px; height: 30px Share-button-secondary-content {font-family: sans-serif; font-size: .75em; background: # fff; display: block; height: 30px; text-align: left; padding-left: 24px Padding-right: 18px; line-height: 30px; color: # 242424; border-radius: 0 15px 15px 0;-webkit-transform: translate3d (- 100%, 0,0); transform: translate3d (- 100%, 0,0);-webkit-transition:-webkit-transform 175ms ease Transition: transform 175ms ease;}

After reading the above, do you have any further understanding of how to use code to develop css3 animation buttons? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.