魔幻般冒泡背景的CSS3按钮动画
这是一款非常有特点的CSS3按钮,按钮的背景不是北京图片,也不是单纯的颜色,而是一组魔幻般的冒泡背景动画。当我们将鼠标滑过按钮时,按钮的冒泡背景动画就可以展示出来。可以说这款CSS3按钮的设计风格相当有创意,而且令人惊叹的是,这些动画都是用CSS3实现的,并没有使用JavaScript,非常强大。
HTML代码:
- <div id="buttonContainer">
- <a href="#" class="button big blue">Big Button</a>
- <a href="#" class="button big green">Big Button</a>
- <a href="#" class="button big orange">Big Button</a>
- <a href="#" class="button big gray">Big Button</a>
- <a href="#" class="button blue medium">Medium Button</a>
- <a href="#" class="button green medium">Medium Button</a>
- <a href="#" class="button orange medium">Medium Button</a>
- <a href="#" class="button gray medium">Medium Button</a>
- <a href="#" class="button small blue">Small Button</a>
- <a href="#" class="button small green">Small Button</a>
- <a href="#" class="button small blue rounded">Rounded</a>
- <a href="#" class="button small orange">Small Button</a>
- <a href="#" class="button small gray">Small Button</a>
- <a href="#" class="button small green rounded">Rounded</a>
- </div>
- .button{
- font:15px Calibri, Arial, sans-serif;
- /* A semi-transparent text shadow */
- text-shadow:1px 1px 0 rgba(255,255,255,0.4);
- /* Overriding the default underline styling of the links */
- text-decoration:none !important;
- whitewhite-space:nowrap;
- display:inline-block;
- vertical-align:baselinebaseline;
- position:relative;
- cursor:pointer;
- padding:10px 20px;
- background-repeat:no-repeat;
- /* The following two rules are fallbacks, in case
- the browser does not support multiple backgrounds. */
- background-position:bottombottom left;
- background-image:url('button_bg.png');
- /* Multiple backgrounds version. The background images
- are defined individually in color classes */
- background-position:bottombottom left, top rightright, 0 0, 0 0;
- background-clip:border-box;
- /* Applying a default border raidus of 8px */
- -moz-border-radius:8px;
- -webkit-border-radius:8px;
- border-radius:8px;
- /* A 1px highlight inside of the button */
- -moz-box-shadow:0 0 1px #fff inset;
- -webkit-box-shadow:0 0 1px #fff inset;
- box-shadow:0 0 1px #fff inset;
- /* Animating the background positions with CSS3 */
- /* Currently works only in Safari/Chrome */
- -webkit-transition:background-position 1s;
- -moz-transition:background-position 1s;
- transition:background-position 1s;
- }
- .button:hover{
- /* The first rule is a fallback, in case the browser
- does not support multiple backgrounds
- */
- background-position:top left;
- background-position:top left, bottombottom rightright, 0 0, 0 0;
- }
- .button:active{
- /* Moving the button 1px to the bottom when clicked */
- bottombottom:-1px;
- }
- /* The three buttons sizes */
- .button.big { font-size:30px;}
- .button.medium { font-size:18px;}
- .button.small { font-size:13px;}
- /* A more rounded button */
- .button.rounded{
- -moz-border-radius:4em;
- -webkit-border-radius:4em;
- border-radius:4em;
- }
- /* Defining four button colors */
- /* BlueButton */
- .blue.button{
- color:#0f4b6d !important;
- border:1px solid #84acc3 !important;
- /* A fallback background color */
- background-color: #48b5f2;
- /* Specifying a version with gradients according to */
- background-image: url('button_bg.png'), url('button_bg.png'),
- -moz-radial-gradient( center bottombottom, circle,
- rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
- -moz-linear-gradient(#4fbbf7, #3faeeb);
- background-image: url('button_bg.png'), url('button_bg.png'),
- -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
- from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
- -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
- }
- .blue.button:hover{
- background-color:#63c7fe;
- background-image: url('button_bg.png'), url('button_bg.png'),
- -moz-radial-gradient( center bottombottom, circle,
- rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
- -moz-linear-gradient(#63c7fe, #58bef7);
- background-image: url('button_bg.png'), url('button_bg.png'),
- -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
- from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
- -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
- }
- /* Green Button */
- .green.button{
- color:#345903 !important;
- border:1px solid #96a37b !important;
- background-color: #79be1e;
- 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);
- 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));
- }
- .green.button:hover{
- background-color:#89d228;
- 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);
- 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));
- }
- /* Orange Button */
- .orange.button{
- color:#693e0a !important;
- border:1px solid #bea280 !important;
- background-color: #e38d27;
- 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);
- 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));
- }
- .orange.button:hover{
- background-color:#ec9732;
- 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);
- 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));
- }
- .gray.button{
- color:#525252 !important;
- border:1px solid #a5a5a5 !important;
- background-color: #a9adb1;
- 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);
- 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));
- }
- .gray.button:hover{
- background-color:#b6bbc0;
- 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);
- 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));
- }
魔幻般冒泡背景的CSS3按钮动画的更多相关文章
- 8款超酷而实用的CSS3按钮动画
1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...
- 基础理解2:CSS3按钮动画
一个Css3按钮效果很好,仔细看了一下发现就是::after,::before然后加上transition,transform等效果实现,主要关注一下几点就能轻松实现: 1.伪类需要position定 ...
- 8套迷人精致的CSS3 3D按钮动画
1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...
- 纯CSS3实现牛奶般剔透的3D按钮特效
今天我们要来看一款非常特别的纯CSS3 3D按钮,它的外观酷似纯白剔透的牛奶,点击按钮的时候还会出现一种很柔和的弹力效果.按钮按下时,按钮会轻轻的弹动一下,非常逼真.本文我们在观赏演示的同时,也将源代 ...
- 5个基于css3超炫的鼠标滑动按钮动画
今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...
- 6种炫酷的CSS3按钮边框动画特效
6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...
- 一款基于css3的动画按钮
之前为大家分享了 推荐10款纯css3实现的实用按钮.今天给大家带来一款基于css3的动画按钮.实现的效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=& ...
- 20个漂亮 CSS3 按钮效果及优秀的制作教程
在这篇文章中,我们编译了一组有用的 CSS3 动画按钮教程和引人注目的实验.正如我们都知道的,CSS3在网页设计方面是最重要和最关键的,可以使您的网站对访客更具吸引力和互动性.你可以学习这些教程和试验 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
随机推荐
- AngularJS 四大特性
1.模块化 2.双向数据绑定 3.依赖注入 4.mvc模式
- 一套高可用、易伸缩、高并发的IM群聊架构方案设计实践
本文原题为“一套高可用群聊消息系统实现”,由作者“于雨氏”授权整理和发布,内容有些许改动,作者博客地址:alexstocks.github.io.应作者要求,如需转载,请联系作者获得授权. 一.引言 ...
- Android 基本控件相关知识整理
Android应用开发的一项重要内容就是界面开发.对于用户来说,不管APP包含的逻辑多么复杂,功能多么强大,如果没有提供友好的图形交互界面,将很难吸引最终用户.作为一个程序员如何才能开发出友好的图形界 ...
- lazy_import源码解析(原创)
参考链接: An approach to lazy importing in Python 3.7(这个是参考源) Python3.7中一种懒加载的方式(中文翻译) 原博客核心: 以前的两种惰性/延迟 ...
- 使用 Docker 部署 Grafana + Prometheus 监控 MySQL 数据库
一.背景 在平时开发过程当中需要针对 MySQL 数据库进行监控,这里我们可以使用 Grafana 和 Prometheus 来实现监控功能.Grafana 是一款功能强大的仪表盘面板,支持多种数据源 ...
- 两种方法:VS2008下C++窗体程序显示控制台的方法——在QT程序中使用cout和cin
老蔡写了一个基于QT的窗体程序,而过去写的类的调试信息都是用cout显示的,苦于窗体程序无法显示cout信息很多信息都看不到,于是就想到让控制台和窗体同时显示.显示控制台方法如下 1.项目(或者叫“工 ...
- Linux常用命令之压缩和解压缩命令
目录 1.压缩解压缩格式 .gz 一.将文件压缩为 .gz 格式,只能压缩文件:gzip 二.将 .gz 文件解压:gunzip 2.压缩解压缩格式 .tar.gz 一.将文件或目录压缩为 .tar. ...
- 动态代理实现AOP
代理 代理顾名思义:代为处理.不是对目标对象的直接操作,而是通过代理对目标对象进行包装,此时可以在目标对象的基础上添加额外的操作以满足业务需求.图示 分类:动态代理.静态代理. 代理三要素:共同接口. ...
- PHP中对象的本质
PHP中的面向对象 先看PHP源码中对变量的定义 #zend/zend.h typedef union_zvalue_value { long lval;/* long value */ double ...
- 敏感词汇过滤DFA算法
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...