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

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

成都网站制作、成都网站设计介绍好的网站是理念、设计和技术的结合。成都创新互联公司拥有的网站设计理念、多方位的设计风格、经验丰富的设计团队。提供PC端+手机端网站建设，用营销思维进行网站设计、采用先进技术开源代码、注重用户体验与SEO基础，将技术与创意整合到网站之中，以契合客户的方式做到创意性的视觉化效果。

今天给大家分享一款纯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实现的动画按钮代码分享这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

当前文章：css3实现的动画按钮代码分享
浏览地址：https://www.cdcxhl.com/article4/pppooe.html

成都网站建设公司_创新互联，为您提供品牌网站建设、品牌网站设计、搜索引擎优化、网站维护、网站设计公司、响应式网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联