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


Posted in HTML / CSS onFebruary 27, 2016

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

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

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, Arialsans-serif;   
  3.   
  4.  /* A semi-transparent text shadow */  
  5.  text-shadow:1px 1px 0 rgba(255,255,255,0.4);   
  6.   
  7.  /* Overriding the default underline styling of the links */  
  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.  /* The following two rules are fallbacks, in case  
  20.     the browser does not support multiple backgrounds. */  
  21.   
  22.  background-position:bottombottom left;   
  23.  background-image:url('button_bg.png');   
  24.   
  25.  /* Multiple backgrounds version. The background images  
  26.     are defined individually in color classes */  
  27.   
  28.  background-position:bottombottom lefttop rightright, 0 0, 0 0;   
  29.  background-clip:border-box;   
  30.   
  31.  /* Applying a default border raidus of 8px */  
  32.   
  33.  -moz-border-radius:8px;   
  34.  -webkit-border-radius:8px;   
  35.  border-radius:8px;   
  36.   
  37.  /* A 1px highlight inside of the button */  
  38.   
  39.  -moz-box-shadow:0 0 1px #fff inset;   
  40.  -webkit-box-shadow:0 0 1px #fff inset;   
  41.  box-shadow:0 0 1px #fff inset;   
  42.   
  43.  /* Animating the background positions with CSS3 */  
  44.  /* Currently works only in Safari/Chrome */  
  45.   
  46.  -webkit-transition:background-position 1s;   
  47.  -moz-transition:background-position 1s;   
  48.  transition:background-position 1s;   
  49. }   
  50.   
  51. .button:hover{   
  52.   
  53.  /* The first rule is a fallback, in case the browser  
  54.     does not support multiple backgrounds  
  55.  */  
  56.   
  57.  background-position:top left;   
  58.  background-position:top leftbottombottom rightright, 0 0, 0 0;   
  59. }   
  60.   
  61. .button:active{   
  62.  /* Moving the button 1px to the bottom when clicked */  
  63.  bottombottom:-1px;   
  64. }   
  65.   
  66. /* The three buttons sizes */  
  67.   
  68. .button.big  { font-size:30px;}   
  69. .button.medium { font-size:18px;}   
  70. .button.small { font-size:13px;}   
  71.   
  72. /* A more rounded button */  
  73.   
  74. .button.rounded{   
  75.  -moz-border-radius:4em;   
  76.  -webkit-border-radius:4em;   
  77.  border-radius:4em;   
  78. }   
  79.   
  80. /* Defining four button colors */  
  81.   
  82. /* BlueButton */  
  83.   
  84. .blue.button{   
  85.  color:#0f4b6d !important;   
  86.   
  87.  border:1px solid #84acc3 !important;   
  88.   
  89.  /* A fallback background color */  
  90.  background-color#48b5f2;   
  91.   
  92.  /* Specifying a version with gradients according to */  
  93.   
  94.  background-imageurl('button_bg.png'), url('button_bg.png'),   
  95.       -moz-radial-gradient( center bottombottomcircle,   
  96.             rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),   
  97.       -moz-linear-gradient(#4fbbf7#3faeeb);   
  98.   
  99.  background-imageurl('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. }   
  104.   
  105. .blue.button:hover{   
  106.  background-color:#63c7fe;   
  107.   
  108.  background-imageurl('button_bg.png'), url('button_bg.png'),   
  109.       -moz-radial-gradient( center bottombottomcircle,   
  110.             rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),   
  111.       -moz-linear-gradient(#63c7fe#58bef7);   
  112.   
  113.  background-imageurl('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. }   
  118.   
  119. /* Green Button */  
  120.   
  121. .green.button{   
  122.  color:#345903 !important;   
  123.  border:1px solid #96a37b !important;    
  124.  background-color#79be1e;   
  125.   
  126.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottomcircle, 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. }   
  129.   
  130. .green.button:hover{   
  131.  background-color:#89d228;   
  132.   
  133.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottomcircle, 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. }   
  136.   
  137. /* Orange Button */  
  138.   
  139. .orange.button{   
  140.  color:#693e0a !important;   
  141.  border:1px solid #bea280 !important;    
  142.  background-color#e38d27;   
  143.   
  144.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottomcircle, 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. }   
  147.   
  148. .orange.button:hover{   
  149.  background-color:#ec9732;   
  150.   
  151.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottomcircle, 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. }   
  154.   
  155. .gray.button{   
  156.  color:#525252 !important;   
  157.  border:1px solid #a5a5a5 !important;    
  158.  background-color#a9adb1;   
  159.   
  160.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottomcircle, 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. }   
  163.   
  164. .gray.button:hover{   
  165.  background-color:#b6bbc0;   
  166.   
  167.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottomcircle, 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. }   

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

HTML / CSS 相关文章推荐
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 #HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 #HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 #HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 #HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 #HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 #HTML / CSS
css3 border旋转时的动画应用
Jan 22 #HTML / CSS
You might like
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
对python3新增的byte类型详解
2018/12/04 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
linux面试题参考答案(5)
2016/11/05 面试题
校长岗位职责
2013/11/26 职场文书
大学生校园创业计划书
2014/02/08 职场文书
总经理的岗位职责
2014/02/23 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
政府采购方案
2014/06/12 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
教师个人总结范文
2015/02/11 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
如何写观后感
2015/06/19 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
学校运动会开幕词
2016/03/03 职场文书