如何使用代码开发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的动画按钮有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注行业资讯频道，感谢大家的支持。