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

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