纯css3实现的动画按钮的实例教程

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

　　今天给大家分享一款纯css3实现的动画按钮。第一排的按钮当鼠标经过的背景色动画切换，图标从右侧飞入，第二排的按钮当鼠标经过的时候边框动画切换，图标右侧飞入，效果非常好，一起看下效果图：

　　实现的代码。

　　html代码：

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

1. <div class="black">  
2.             <a href="#" class="btn"><span>Become A Member</span> <i>→</i> </a><a href="#"  
3.                 class="btn"><span>Support Us</span> <i>→</i> </a><a href="#" class="btn"><span>  
4.                     Going Down</span> <i class="down">→</i> </a><a href="#" class="btn"><span>Sign   
5.                         Up</span> <i class="up">→</i> </a>  
6.         </div>  
7.         <div class="white">  
8.   
9.             <a href="#" class="btn"><span>Become A Member</span> <i>→</i> </a><a href="#"  
10.                 class="btn"><span>Support Us</span> <i>→</i> </a><a href="#" class="btn"><span>  
11.                     Going Down</span> <i class="down">→</i> </a><a href="#" class="btn"><span>Sign   
12.                         Up</span> <i class="up">→</i> </a>  
13.         </div>  

　　css3代码：

CSS Code复制内容到剪贴板

1. body   
2.         {   
3.         }   
4.            
5.         h1   
6.         {   
7.             font-family: "Abril Titling" , Georgia, serif;   
8.             color: #f9f9f9;   
9.             letter-spacing: 1px;   
10.         }   
11.            
12.         body div   
13.         {   
14.             padding: 60px 0;   
15.             text-align: center;   
16.             height: 80px;   
17.             margin-top: 0;   
18.         }   
19.            
20.         .black  
21.         {   
22.             background: #262D28;   
23.         }   
24.            
25.         .white  
26.         {   
27.             background: #f9f9f9;   
28.         }   
29.            
30.         a   
31.         {   
32.             display: inline-block;   
33.             margin: 10px;   
34.         }   
35.            
36.         .btn   
37.         {   
38.             position: relative;   
39.             width: 160px;   
40.             padding: 1.2rem 3rem;   
41.             border: 1px solid #0AA944;   
42.             font-size: 15px;   
43.             text-decoration: none;   
44.             color: #f9f9f9;   
45.             font-family: "Tablet Gothic" , sans-serif;   
46.             text-transform: uppercase;   
47.             font-weight: 300;   
48.             letter-spacing: 1.5px;   
49.             -webkit-transition: all .2s ease-out;   
50.             -moz-transition: all .2s ease-out;   
51.             -ms-transition: all .2s ease-out;   
52.             -o-transition: all .2s ease-out;   
53.             transition: all .2s ease-out;   
54.         }   
55.            
56.         .white .btn   
57.         {   
58.             color: #262D28;   
59.             border: 2px solid #0AA944;   
60.         }   
61.            
62.         .btn span   
63.         {   
64.             position: relative;   
65.             top: 2px;   
66.             left: 0;   
67.             -webkit-transition: all .3s ease-out;   
68.             -moz-transition: all .3s ease-out;   
69.             -ms-transition: all .3s ease-out;   
70.             -o-transition: all .3s ease-out;   
71.             transition: all .3s ease-out;   
72.         }   
73.            
74.         .btn i   
75.         {   
76.             opacity: 0;   
77.             position: absolute;   
78.             margin-top: -21px;   
79.             top: 2.5rem;   
80.             left: 120%;   
81.             -webkit-transition: all .3s ease-out;   
82.             -moz-transition: all .3s ease-out;   
83.             -ms-transition: all .3s ease-out;   
84.             -o-transition: all .3s ease-out;   
85.             transition: all .3s ease-out;   
86.         }   
87.            
88.         .btn:hover   
89.         {   
90.             background: rgba(255,255,255, .9);   
91.             border: 1px solid rgba(0,0,0,1);   
92.         }   
93.            
94.         .white .btn:hover   
95.         {   
96.             background: rgba(0,0,0, .02);   
97.             border: 2px solid rgba(0,0,0,1);   
98.         }   
99.            
100.         .btn:hover span   
101.         {   
102.             color: #333;   
103.             left: -20px;   
104.         }   
105.            
106.         a.btn:hover i   
107.         {   
108.             opacity: 1;   
109.             left: 80%;   
110.             color: #333;   
111.             -webkit-transform: scale(1.2);   
112.         }   
113.            
114.         a.btn:hover .up   
115.         {   
116.             -webkit-transform: rotate(270deg);   
117.         }   
118.            
119.         a.btn:hover .down   
120.         {   
121.             -webkit-transform: rotate(90deg);   
122.         }  

　以上就是今天给大家分享一款纯css3实现的动画按钮的全部代码，　谢谢阅读，希望能帮到大家，请继续关注AIDI，我们会努力分享更多优秀的文章。