CSS3怎么实现按钮动画

这篇文章主要介绍“css3怎么实现按钮动画”，在日常操作中，相信很多人在CSS3怎么实现按钮动画问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS3怎么实现按钮动画”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

这是一款非常有特点的CSS3按钮，按钮的背景不是北京图片，也不是单纯的颜色，而是一组魔幻般的冒泡背景动画。当我们将鼠标滑过按钮时，按钮的冒泡背景动画就可以展示出来。可以说这款CSS3按钮的设计风格相当有创意，而且令人惊叹的是，这些动画都是用CSS3实现的，并没有使用javascript，非常强大。

html代码：

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

1. <div id="buttonContainer">  

2.   

3.     <a href="#" class="button big blue">Big Button</a>  

4.     <a href="#" class="button big green">Big Button</a>  

5.     <a href="#" class="button big orange">Big Button</a>  

6.     <a href="#" class="button big gray">Big Button</a>  

7.   

8.     <a href="#" class="button blue medium">Medium Button</a>  

9.     <a href="#" class="button green medium">Medium Button</a>  

10.     <a href="#" class="button orange medium">Medium Button</a>  

11.     <a href="#" class="button gray medium">Medium Button</a>  

12.   

13.     <a href="#" class="button small blue">Small Button</a>  

14.     <a href="#" class="button small green">Small Button</a>  

15.     <a href="#" class="button small blue rounded">Rounded</a>  

16.   

17.     <a href="#" class="button small orange">Small Button</a>  

18.     <a href="#" class="button small gray">Small Button</a>  

19.   

20.     <a href="#" class="button small green rounded">Rounded</a>  

21.   

22. </div>  

CSS代码：

CSS Code复制内容到剪贴板

1. .button{   

2.  font:15px Calibri, Arial, sans-serif;   

3.   

4.    

5.  text-shadow:1px 1px 0 rgba(255,255,255,0.4);   

6.   

7.    

8.  text-decoration:none !important;   

9.  whitewhite-space:nowrap;   

10.   

11.  display:inline-block;   

12.  vertical-align:baselinebaseline;   

13.  position:relative;   

14.  cursor:pointer;   

15.  padding:10px 20px;   

16.   

17.  background-repeat:no-repeat;   

18.   

19.    

20.   

21.  background-position:bottombottom left;   

22.  background-image:url('button_bg.png');   

23.   

24.    

25.   

26.  background-position:bottombottom left, top rightright, 0 0, 0 0;   

27.  background-clip:border-box;   

28.   

29.    

30.   

31.  -moz-border-radius:8px;   

32.  -WEBkit-border-radius:8px;   

33.  border-radius:8px;   

34.   

35.    

36.   

37.  -moz-box-shadow:0 0 1px #fff inset;   

38.  -webkit-box-shadow:0 0 1px #fff inset;   

39.  box-shadow:0 0 1px #fff inset;   

40.   

41.    

42.    

43.   

44.  -webkit-transition:background-position 1s;   

45.  -moz-transition:background-position 1s;   

46.  transition:background-position 1s;   

47. }   

48.   

49. .button:hover{   

50.   

51.    

52.   

53.  background-position:top left;   

54.  background-position:top left, bottombottom rightright, 0 0, 0 0;   

55. }   

56.   

57. .button:active{   

58.    

59.  bottombottom:-1px;   

60. }   

61.   

62.   

63.   

64. .button.big  { font-size:30px;}   

65. .button.medium { font-size:18px;}   

66. .button.small { font-size:13px;}   

67.   

68.   

69.   

70. .button.rounded{   

71.  -moz-border-radius:4em;   

72.  -webkit-border-radius:4em;   

73.  border-radius:4em;   

74. }   

75.   

76.   

77.   

78.   

79.   

80. .blue.button{   

81.  color:#0f4b6d !important;   

82.   

83.  border:1px solid #84acc3 !important;   

84.   

85.    

86.  background-color: #48b5f2;   

87.   

88.    

89.   

90.  background-image: url('button_bg.png'), url('button_bg.png'),   

91.       -moz-radial-gradient( center bottombottom, circle,   

92.             rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),   

93.       -moz-linear-gradient(#4fbbf7, #3faeeb);   

94.   

95.  background-image: url('button_bg.png'), url('button_bg.png'),   

96.       -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,   

97.            from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),   

98.       -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));   

99. }   

100.   

101. .blue.button:hover{   

102.  background-color:#63c7fe;   

103.   

104.  background-image: url('button_bg.png'), url('button_bg.png'),   

105.       -moz-radial-gradient( center bottombottom, circle,   

106.             rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),   

107.       -moz-linear-gradient(#63c7fe, #58bef7);   

108.   

109.  background-image: url('button_bg.png'), url('button_bg.png'),   

110.       -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,   

111.            from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),   

112.       -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));   

113. }   

114.   

115.   

116.   

117. .green.button{   

118.  color:#345903 !important;   

119.  border:1px solid #96a37b !important;    

120.  background-color: #79be1e;   

121.   

122.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);   

123.  background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));   

124. }   

125.   

126. .green.button:hover{   

127.  background-color:#89d228;   

128.   

129.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);   

130.  background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));   

131. }   

132.   

133.   

134.   

135. .orange.button{   

136.  color:#693e0a !important;   

137.  border:1px solid #bea280 !important;    

138.  background-color: #e38d27;   

139.   

140.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);   

141.  background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));   

142. }   

143.   

144. .orange.button:hover{   

145.  background-color:#ec9732;   

146.   

147.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);   

148.  background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));   

149. }   

150.   

151. .gray.button{   

152.  color:#525252 !important;   

153.  border:1px solid #a5a5a5 !important;    

154.  background-color: #a9adb1;   

155.   

156.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);   

157.  background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));   

158. }   

159.   

160. .gray.button:hover{   

161.  background-color:#b6bbc0;   

162.   

163.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3D6, #9fa5a9);   

164.  background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));   

165. }   

到此，关于“CSS3怎么实现按钮动画”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！