首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

css3 按钮 利用css3实现超酷下载按钮

Posted in HTML / CSS onMarch 18, 2013

效果图如下：
css3 按钮 利用css3实现超酷下载按钮
代码如下：

复制代码
代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Live Preview</title>
<style>
body {
padding: 20px;
background: black;
}
div.container {
position: relative;
background: #1f1f1f;
margin: 0 auto;
width: 500px;
height: 100px;
padding: 120px 0px;
/* border-radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* box-shadow */
-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
text-align: center;
}
a.button {
position: relative;
height: 15px;
padding: 12px 20px 15px 68px;
cursor: pointer;
text-align: Right;
font-weight: bold;
font-size: 18px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
display: inline-block !important;
font: 700 15px 'Arial', Helvetica, Clean, sans-serif;
margin: 0px 0px 20px 10px;
position: relative;
text-decoration: none;
transition: background-position .2s ease, margin .1s ease;
-webkit-transition: background-position .2s ease, margin .1s ease;
-moz-transition: background-position .2s ease, margin .1s ease;
background-repeat: repeat-x;
}
a.button:hover { background-position: 0 10px }
a.button:active {
-webkit-box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
margin: 2px 0 20px 10px;
}
a.button span.bar {
width: 1px;
height: 30px;
position: absolute;
background: black;
top: 5px;
left: 50px;
}
a.button div.arrow {
position: absolute;
left: 20px;
top: 14px;
}
a.button div.arrow span.top {
position: absolute;
width: 6px;
height: 9px;
background: #000;
top: 0;
left: 3px;
}
a.button div.arrow span.bottom,
div.arrow span.bottomShadow {
position: absolute;
width: 0px;
height: 0px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid black;
top: 9px;
left: -2px;
z-index: 2;
}
a.button div.arrow span.bottomShadow {
z-index: 1;
left: -1px;
}
/* GRAY
================================================== */
a.grey {
background-color: #888;
background-image: -webkit-linear-gradient(top, #888, #333);
background-image: -moz-linear-gradient(top, #888, #333);
background-image: -ms-linear-gradient(top, #888, #333);
background-image: -o-linear-gradient(top, #888, #333);
background-image: linear-gradient(top, #888, #333);
text-shadow: 1px 1px 1px rgba(255,255,255,.2);
border-top: 1px solid #aaa;
}
a.grey span.bar {
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
-moz-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
box-shadow: 1px 1px 1px rgba(255,255,255,.2);
}
a.grey div.arrow span.top {
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
-moz-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
box-shadow: 1px 1px 1px rgba(255,255,255,.2);
}
a.grey div.arrow span.bottomShadow { border-top: 8px solid rgba(255, 255, 255, 0.2) }
/* BLUE
================================================== */
a.blue {
background-color: #00aeef;
background-image: -webkit-linear-gradient(top, #00aeef, #00587a);
background-image: -moz-linear-gradient(top, #00aeef, #00587a);
background-image: -ms-linear-gradient(top, #00aeef, #00587a);
background-image: -o-linear-gradient(top, #00aeef, #00587a);
background-image: linear-gradient(top, #00aeef, #00587a);
text-shadow: 1px 1px 1px #23aaff;
border-top: 1px solid #23ccff;
}
a.blue span.bar {
-webkit-box-shadow: 1px 1px 1px #23aaff;
-moz-box-shadow: 1px 1px 1px #23aaff;
box-shadow: 1px 1px 1px #23aaff;
}
a.blue div.arrow span.top {
-webkit-box-shadow: 1px 1px 1px #23aaff;
-moz-box-shadow: 1px 1px 1px #23aaff;
box-shadow: 1px 1px 1px #23aaff;
}
a.blue div.arrow span.bottomShadow { border-top: 8px solid #23aaff }
/* GREEN
================================================== */
a.green {
background-color: #68c800;
background-image: -webkit-linear-gradient(top, #68c800, #367100);
background-image: -moz-linear-gradient(top, #68c800, #367100);
background-image: -ms-linear-gradient(top, #68c800, #367100);
background-image: -o-linear-gradient(top, #68c800, #367100);
background-image: linear-gradient(top, #68c800, #367100);
text-shadow: 1px 1px 1px #67c800;
border-top: 1px solid #67e800;
}
a.green span.bar {
-webkit-box-shadow: 1px 1px 1px #67c800;
-moz-box-shadow: 1px 1px 1px #67c800;
box-shadow: 1px 1px 1px #67c800;
}
a.green div.arrow span.top {
-webkit-box-shadow: 1px 1px 1px #67c800;
-moz-box-shadow: 1px 1px 1px #67c800;
box-shadow: 1px 1px 1px #67c800;
}
a.green div.arrow span.bottomShadow { border-top: 8px solid #67c800 }
/* RED
================================================== */
a.red {
background-color: #ee5f5b;
background-image: -webkit-linear-gradient(top, #ee5f5b, #973431);
background-image: -moz-linear-gradient(top, #ee5f5b, #973431);
background-image: -ms-linear-gradient(top, #ee5f5b, #973431);
background-image: -o-linear-gradient(top, #ee5f5b, #973431);
background-image: linear-gradient(top, #ee5f5b, #973431);
text-shadow: 1px 1px 1px #ed5d69;
border-top: 1px solid #ed8d69;
}
a.red span.bar {
-webkit-box-shadow: 1px 1px 1px #ed5d69;
-moz-box-shadow: 1px 1px 1px #ed5d69;
box-shadow: 1px 1px 1px #ed5d69;
}
a.red div.arrow span.top {
-webkit-box-shadow: 1px 1px 1px #ed5d69;
-moz-box-shadow: 1px 1px 1px #ed5d69;
box-shadow: 1px 1px 1px #ed5d69;
}
a.red div.arrow span.bottomShadow { border-top: 8px solid #ed5d69 }
/* ORANGE
================================================== */
a.orange {
background-color: #ff8636;
background-image: -webkit-linear-gradient(top, #ff8636, #9a3e00);
background-image: -moz-linear-gradient(top, #ff8636, #9a3e00);
background-image: -ms-linear-gradient(top, #ff8636, #9a3e00);
background-image: -o-linear-gradient(top, #ff8636, #9a3e00);
background-image: linear-gradient(top, #ff8636, #9a3e00);
text-shadow: 1px 1px 1px #ff7f42;
border-top: 1px solid #ffa542;
}
a.orange span.bar {
-webkit-box-shadow: 1px 1px 1px #ff7f42;
-moz-box-shadow: 1px 1px 1px #ff7f42;
box-shadow: 1px 1px 1px #ff7f42;
}
a.orange div.arrow span.top {
-webkit-box-shadow: 1px 1px 1px #ff7f42;
-moz-box-shadow: 1px 1px 1px #ff7f42;
box-shadow: 1px 1px 1px #ff7f42;
}
a.orange div.arrow span.bottomShadow { border-top: 8px solid #ff7f42 }
/* YELLOW
================================================== */
a.yellow {
background-color: #fcd116;
background-image: -webkit-linear-gradient(top, #fcd116, #705b00);
background-image: -moz-linear-gradient(top, #fcd116, #705b00);
background-image: -ms-linear-gradient(top, #fcd116, #705b00);
background-image: -o-linear-gradient(top, #fcd116, #705b00);
background-image: linear-gradient(top, #fcd116, #705b00);
text-shadow: 1px 1px 1px #ffc33d;
border-top: 1px solid #ffff3d;
}
a.yellow span.bar {
-webkit-box-shadow: 1px 1px 1px #ffc33d;
-moz-box-shadow: 1px 1px 1px #ffc33d;
box-shadow: 1px 1px 1px #ffc33d;
}
a.yellow div.arrow span.top {
-webkit-box-shadow: 1px 1px 1px #ffc33d;
-moz-box-shadow: 1px 1px 1px #ffc33d;
box-shadow: 1px 1px 1px #ffc33d;
}
a.yellow div.arrow span.bottomShadow { border-top: 8px solid #ffc33d }
/* FOR DEMO PURPOSE ONLY
================================================== */
a.grey {
position: absolute;
top: 80px;
left: 80px;
}
a.blue {
position: absolute;
top: 80px;
left: 260px;
}
a.green {
position: absolute;
top: 140px;
left: 80px;
}
a.red {
position: absolute;
top: 140px;
left: 260px;
}
a.orange {
position: absolute;
top: 200px;
left: 80px;
}
a.yellow {
position: absolute;
top: 200px;
left: 260px;
}
</style>
</head>
<body>
<a href="http://cssdeck.com/item/20/download-button-set-no-images" style="position: absolute; top: -1px; right: -1px; z-index: 1000; overflow: hidden; background: #ccc; color: #333; text-shadow: 0px 1px 1px #fff; text-decoration: none; padding: 5px 10px; display: inline-block; border: 0; font-size: 12px; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-weight: bold;">Back To Item</a>
<div class="container">
<a class="button grey">
<div class="arrow">
<span class="top"></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
<a class="button blue">
<div class="arrow">
<span class="top"></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
<a class="button green">
<div class="arrow">
<span class="top"></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
<a class="button red">
<div class="arrow">
<span class="top"></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
<a class="button orange">
<div class="arrow">
<span class="top"></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
<a class="button yellow">
<div class="arrow">
<span class="top"></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
</div>
</body>
</html>

css3 按钮 利用css3实现超酷下载按钮

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 #HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 #HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 #HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 #HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 #HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 #HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 #HTML / CSS
gevent(1) Coroutine(1) Excel(4) 正则表达式(3) pytest(3) 分区(2) greenlet(1) 信息校验(1) 静态压缩(1) 自动播放(1)
You might like
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
jquery操作select大全
2014/04/25 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
Python快速查找list中相同部分的方法
2018/06/27 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
python中re模块知识点总结
2021/01/17 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
欧舒丹美国官网：L’Occitane美国
2018/02/23 全球购物
运行时异常与一般异常有何异同？
2014/01/05 面试题
编写函数，将一个3*3矩阵转置
2013/10/09 面试题
人事专员岗位职责
2013/11/20 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
防火标语大全
2014/10/06 职场文书
工作作风建设心得体会
2014/10/22 职场文书
2014年财政局工作总结
2014/12/09 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
python入门之算法学习
2021/04/22 Python
redis缓存存储Session原理机制
2021/11/20 Redis
Python闭包的定义和使用方法
2022/04/11 Python
python微信智能AI机器人实现多种支付方式
2022/04/12 Python