一款基于css3的动画按钮代码教程

前端  /  管理员 发布于 7年前   168

　　AIDI之前为大家分享了很多款纯css3实现的实用按钮。今天给大家带来一款基于css3的动画按钮。实现的效果图如下：

　　实现的代码。

　　html代码：

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

1. <div class="share-buttons">  
2.         <div class="share-button">  
3.             <div class="share-button-secondary">  
4.                 <div class="share-button-secondary-content">  
5.                     share on twitter   
6.                 </div>  
7.             </div>  
8.             <div class="share-button-primary">  
9.                 <i class="share-button-icon fa fa-twitter"></i>  
10.             </div>  
11.         </div>  
12.         <div class="share-button">  
13.             <div class="share-button-secondary">  
14.                 <div class="share-button-secondary-content">  
15.                     share on facebook   
16.                 </div>  
17.             </div>  
18.             <div class="share-button-primary">  
19.                 <i class="share-button-icon fa fa-facebook"></i>  
20.             </div>  
21.         </div>  
22.         <div class="share-button">  
23.             <div class="share-button-secondary">  
24.                 <div class="share-button-secondary-content">  
25.                     pin on pinterest   
26.                 </div>  
27.             </div>  
28.             <div class="share-button-primary">  
29.                 <i class="share-button-icon fa fa-pinterest"></i>  
30.             </div>  
31.         </div>  
32.         <div class="share-button">  
33.             <div class="share-button-secondary">  
34.                 <div class="share-button-secondary-content">  
35.                     share on tumblr   
36.                 </div>  
37.             </div>  
38.             <div class="share-button-primary">  
39.                 <i class="share-button-icon fa fa-tumblr"></i>  
40.             </div>  
41.         </div>  
42.         <div class="share-button">  
43.             <div class="share-button-secondary">  
44.                 <div class="share-button-secondary-content">  
45.                     share on google+   
46.                 </div>  
47.             </div>  
48.             <div class="share-button-primary">  
49.                 <i class="share-button-icon fa fa-google-plus"></i>  
50.             </div>  
51.         </div>  
52.     </div>  

　　css3代码：

CSS Code复制内容到剪贴板

1. body   
2.         {   
3.             background: -webkit-linear-gradient(0deg, #FF8008 10%, #FFC837 90%);   
4.             background: linear-gradient(90deg, #FF8008 10%, #FFC837 90%);   
5.             padding: 2em;   
6.             text-align: center;   
7.         }   
8.            
9.         *   
10.         {   
11.             -moz-box-sizing: border-box;   
12.             box-sizing: border-box;   
13.         }   
14.            
15.         .share-buttons   
16.         {   
17.             position: absolute;   
18.             width: 300px;   
19.             height: 212px;   
20.             padding-left: 135px;   
21.             top: 50%;   
22.             left: 50%;   
23.             margin-left: -150px;   
24.             margin-top: -106px;   
25.         }   
26.         .share-buttons .share-button   
27.         {   
28.             float: left;   
29.             margin-top: 15px;   
30.         }   
31.         .share-buttons .share-button:first-child   
32.         {   
33.             margin-top: 0;   
34.         }   
35.         .share-buttons .share-button:after   
36.         {   
37.             clear: both;   
38.             display: table;   
39.         }   
40.            
41.         .share-button   
42.         {   
43.             display: block;   
44.             position: relative;   
45.             height: 30px;   
46.         }   
47.         .share-button:hover   
48.         {   
49.             cursor: pointer;   
50.         }   
51.         .share-button:hover .share-button-primary   
52.         {   
53.             box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1);   
54.         }   
55.         .share-button:hover .share-button-secondary-content  
56.         {   
57.             -webkit-transform: translate3d(0, 0, 0);   
58.             transform: translate3d(0, 0, 0);   
59.         }   
60.            
61.         .share-button-primary   
62.         {   
63.             position: absolute;   
64.             background: #fff;   
65.             width: 30px;   
66.             height: 30px;   
67.             border-radius: 15px;   
68.             left: 0;   
69.             top: 50%;   
70.             margin-top: -15px;   
71.         }   
72.            
73.         .share-button-icon  
74.         {   
75.             display: block;   
76.             color: #242424;   
77.             position: absolute;   
78.             width: 30px;   
79.             line-height: 30px;   
80.             font-size: 16px;   
81.             margin-top: 1px;   
82.         }   
83.            
84.         .share-button-secondary   
85.         {   
86.             overflow: hidden;   
87.             margin-left: 15px;   
88.             height: 30px;   
89.         }   
90.            
91.         .share-button-secondary-content  
92.         {   
93.             font-family: sans-serif;   
94.             font-size: .75em;   
95.             background: #fff;   
96.             display: block;   
97.             height: 30px;   
98.             text-align: left;   
99.             padding-left: 24px;   
100.             padding-right: 18px;   
101.             line-height: 30px;   
102.             color: #242424;   
103.             border