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實現的動畫按鈕代碼分享這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！