魔幻般冒泡背景的CSS3按钮动画

网络
雾，没有山河那么壮观，没有雨那么缠绵。它总是那么轻盈，那么淡雅，给人一种美的享受。陽光被层层叠叠的树叶过滤，漏到他身上变成了淡淡的圆圆的轻轻摇曳的光晕。

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

HTML代码：

XML/HTML Code复制内容到剪贴板
  1. <divid="buttonContainer">
  3. <arel="nofollow noopener noreferrer" href="#"class="buttonbigblue">BigButton</a>
  4. <arel="nofollow noopener noreferrer" href="#"class="buttonbiggreen">BigButton</a>
  5. <arel="nofollow noopener noreferrer" href="#"class="buttonbigorange">BigButton</a>
  6. <arel="nofollow noopener noreferrer" href="#"class="buttonbiggray">BigButton</a>
  8. <arel="nofollow noopener noreferrer" href="#"class="buttonbluemedium">MediumButton</a>
  9. <arel="nofollow noopener noreferrer" href="#"class="buttongreenmedium">MediumButton</a>
  10. <arel="nofollow noopener noreferrer" href="#"class="buttonorangemedium">MediumButton</a>
  11. <arel="nofollow noopener noreferrer" href="#"class="buttongraymedium">MediumButton</a>
  13. <arel="nofollow noopener noreferrer" href="#"class="buttonsmallblue">SmallButton</a>
  14. <arel="nofollow noopener noreferrer" href="#"class="buttonsmallgreen">SmallButton</a>
  15. <arel="nofollow noopener noreferrer" href="#"class="buttonsmallbluerounded">Rounded</a>
  17. <arel="nofollow noopener noreferrer" href="#"class="buttonsmallorange">SmallButton</a>
  18. <arel="nofollow noopener noreferrer" href="#"class="buttonsmallgray">SmallButton</a>
  20. <arel="nofollow noopener noreferrer" href="#"class="buttonsmallgreenrounded">Rounded</a>
  22. </div>

CSS代码：

CSS Code复制内容到剪贴板
  1. .button{
  2. font:15pxCalibri,Arial,sans-serif;
  4. /*Asemi-transparenttextshadow*/
  5. text-shadow:1px1px0rgba(255,255,255,0.4);
  7. /*Overridingthedefaultunderlinestylingofthelinks*/
  8. text-decoration:none!important;
  9. whitewhite-space:nowrap;
  11. display:inline-block;
  12. vertical-align:baselinebaseline;
  13. position:relative;
  14. cursor:pointer;
  15. padding:10px20px;
  17. background-repeat:no-repeat;
  19. /*Thefollowingtworulesarefallbacks,incase
  20. thebrowserdoesnotsupportmultiplebackgrounds.*/
  22. background-position:bottombottomleft;
  23. background-image:url('button_bg.png');
  25. /*Multiplebackgroundsversion.Thebackgroundimages
  26. aredefinedindividuallyincolorclasses*/
  28. background-position:bottombottomleft,toprightright,00,00;
  29. background-clip:border-box;
  31. /*Applyingadefaultborderraidusof8px*/
  33. -moz-border-radius:8px;
  34. -webkit-border-radius:8px;
  35. border-radius:8px;
  37. /*A1pxhighlightinsideofthebutton*/
  39. -moz-box-shadow:001px#fffinset;
  40. -webkit-box-shadow:001px#fffinset;
  41. box-shadow:001px#fffinset;
  43. /*AnimatingthebackgroundpositionswithCSS3*/
  44. /*CurrentlyworksonlyinSafari/Chrome*/
  46. -webkit-transition:background-position1s;
  47. -moz-transition:background-position1s;
  48. transition:background-position1s;
  49. }
  51. .button:hover{
  53. /*Thefirstruleisafallback,incasethebrowser
  54. doesnotsupportmultiplebackgrounds
  55. */
  57. background-position:topleft;
  58. background-position:topleft,bottombottomrightright,00,00;
  59. }
  61. .button:active{
  62. /*Movingthebutton1pxtothebottomwhenclicked*/
  63. bottombottom:-1px;
  64. }
  66. /*Thethreebuttonssizes*/
  68. .button.big{font-size:30px;}
  69. .button.medium{font-size:18px;}
  70. .button.small{font-size:13px;}
  72. /*Amoreroundedbutton*/
  74. .button.rounded{
  75. -moz-border-radius:4em;
  76. -webkit-border-radius:4em;
  77. border-radius:4em;
  78. }
  80. /*Definingfourbuttoncolors*/
  82. /*BlueButton*/
  84. .blue.button{
  85. color:#0f4b6d!important;
  87. border:1pxsolid#84acc3!important;
  89. /*Afallbackbackgroundcolor*/
  90. background-color:#48b5f2;
  92. /*Specifyingaversionwithgradientsaccordingto*/
  94. background-image:url('button_bg.png'),url('button_bg.png'),
  95. -moz-radial-gradient(centerbottombottom,circle,
  96. rgba(89,208,244,1)0,rgba(89,208,244,0)100px),
  97. -moz-linear-gradient(#4fbbf7,#3faeeb);
  99. background-image:url('button_bg.png'),url('button_bg.png'),
  100. -webkit-gradient(radial,50%100%,0,50%100%,100,
  101. from(rgba(89,208,244,1)),to(rgba(89,208,244,0))),
  102. -webkit-gradient(linear,0%0%,0%100%,from(#4fbbf7),to(#3faeeb));
  103. }
  105. .blue.button:hover{
  106. background-color:#63c7fe;
  108. background-image:url('button_bg.png'),url('button_bg.png'),
  109. -moz-radial-gradient(centerbottombottom,circle,
  110. rgba(109,217,250,1)0,rgba(109,217,250,0)100px),
  111. -moz-linear-gradient(#63c7fe,#58bef7);
  113. background-image:url('button_bg.png'),url('button_bg.png'),
  114. -webkit-gradient(radial,50%100%,0,50%100%,100,
  115. from(rgba(109,217,250,1)),to(rgba(109,217,250,0))),
  116. -webkit-gradient(linear,0%0%,0%100%,from(#63c7fe),to(#58bef7));
  117. }
  119. /*GreenButton*/
  121. .green.button{
  122. color:#345903!important;
  123. border:1pxsolid#96a37b!important;
  124. background-color:#79be1e;
  126. background-image:url('button_bg.png'),url('button_bg.png'),-moz-radial-gradient(centerbottombottom,circle,rgba(162,211,30,1)0,rgba(162,211,30,0)100px),-moz-linear-gradient(#82cc27,#74b317);
  127. 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));
  128. }
  130. .green.button:hover{
  131. background-color:#89d228;
  133. background-image:url('button_bg.png'),url('button_bg.png'),-moz-radial-gradient(centerbottombottom,circle,rgba(183,229,45,1)0,rgba(183,229,45,0)100px),-moz-linear-gradient(#90de31,#7fc01e);
  134. 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));
  135. }
  137. /*OrangeButton*/
  139. .orange.button{
  140. color:#693e0a!important;
  141. border:1pxsolid#bea280!important;
  142. background-color:#e38d27;
  144. background-image:url('button_bg.png'),url('button_bg.png'),-moz-radial-gradient(centerbottombottom,circle,rgba(232,189,45,1)0,rgba(232,189,45,0)100px),-moz-linear-gradient(#f1982f,#d4821f);
  145. 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));
  146. }
  148. .orange.button:hover{
  149. background-color:#ec9732;
  151. background-image:url('button_bg.png'),url('button_bg.png'),-moz-radial-gradient(centerbottombottom,circle,rgba(241,192,52,1)0,rgba(241,192,52,0)100px),-moz-linear-gradient(#f9a746,#e18f2b);
  152. 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));
  153. }
  155. .gray.button{
  156. color:#525252!important;
  157. border:1pxsolid#a5a5a5!important;
  158. background-color:#a9adb1;
  160. background-image:url('button_bg.png'),url('button_bg.png'),-moz-radial-gradient(centerbottombottom,circle,rgba(197,199,202,1)0,rgba(197,199,202,0)100px),-moz-linear-gradient(#c5c7ca,#92989c);
  161. 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));
  162. }
  164. .gray.button:hover{
  165. background-color:#b6bbc0;
  167. background-image:url('button_bg.png'),url('button_bg.png'),-moz-radial-gradient(centerbottombottom,circle,rgba(202,205,208,1)0,rgba(202,205,208,0)100px),-moz-linear-gradient(#d1d3d6,#9fa5a9);
  168. 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));
  169. }

以上就是本文的全部内容，希望对大家的学习有所帮助。