css3实现的动画按钮代码分享

这篇文章主要讲解了“css3实现的动画按钮代码分享”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css3实现的动画按钮代码分享”吧！

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

　　实现的代码。

　　html代码：

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

1. <div class="black">  

2.             <a href="#" class="btn"><span>Become A Member</span> <i>&rarr;</i> </a><a href="#"  

3.                 class="btn"><span>Support Us</span> <i>&rarr;</i> </a><a href="#" class="btn"><span>  

4.                     Going Down</span> <i class="down">&rarr;</i> </a><a href="#" class="btn"><span>Sign   

5.                         Up</span> <i class="up">&rarr;</i> </a>  

6.         </div>  

7.         <div class="white">  

8.   

9.             <a href="#" class="btn"><span>Become A Member</span> <i>&rarr;</i> </a><a href="#"  

10.                 class="btn"><span>Support Us</span> <i>&rarr;</i> </a><a href="#" class="btn"><span>  

11.                     Going Down</span> <i class="down">&rarr;</i> </a><a href="#" class="btn"><span>Sign   

12.                         Up</span> <i class="up">&rarr;</i> </a>  

13.         </div>  

　　css3代码：

CSS Code复制内容到剪贴板

1. body   

2.         {   

3.         }   

4.            

5.         h2   

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实现的动画按钮代码分享”的内容了，经过本文的学习后，相信大家对css3实现的动画按钮代码分享这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！