如何使用代码开发css3的动画按钮

今天就跟大家聊聊有关如何使用代码开发css3的动画按钮，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

创新互联是一家以网站设计建设，小程序定制开发、网站开发设计，网络软件产品开发，企业互联网推广服务为主的民营科技公司。主要业务涵盖:为客户提供网站策划、网站设计、网站开发、域名申请、网站优化排名、友情链接等服务领域。凭借建站老客户口碑做市场，建设网站时，根据市场搜索规律和搜索引擎的排名收录规律编程，全力为建站客户设计制作排名好的网站，深受老客户认可和赞誉。

今天给大家带来一款基于css3的动画按钮。实现的效果图如下：

如何使用代码开发css3的动画按钮

实现的代码。

html代码：

XML/HTML Code复制内容到剪贴板

  
          
              
                  
                    share on twitter

share on facebook

pin on pinterest

share on tumblr

share on google+

　　css3代码： CSS Code复制内容到剪贴板 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 0 0 0 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; }

看完上述内容，你们对如何使用代码开发css3的动画按钮有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

当前名称：如何使用代码开发css3的动画按钮
本文来源：http://cxhlcq.com/article/gijjds.html