首页
所有分类
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 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
a标签的css样式四个状态
Mar 09 HTML / CSS
纯CSS3实现3D旋转书本效果
Mar 21 HTML / CSS
CSS3弹性布局内容对齐（justify-content）属性使用详解
Jul 31 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
html5清空画布方法（三种）
Oct 16 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 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
Spring-Retry(1) EventBus(1) 多维数组(1) ICF-5900W(2) TcpServer(1) 多线程(6) Fragment(1) muduo(1) Sqlite(2) Spring Boot(5)
You might like
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
js操作时间（年-月-日 时-分-秒 星期几）
2010/06/20 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
JavaScript常用脚本汇总（一）
2015/03/04 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
微信小程序开发（三）：返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
Python的动态重新封装的教程
2015/04/11 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
python实现抖音点赞功能
2019/04/07 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
Python如何安装第三方模块
2020/05/28 Python
Python实现上下文管理器的方法
2020/08/07 Python
世界最大的票务市场：viagogo
2017/02/16 全球购物
Pretty You London官网：英国拖鞋和睡衣品牌
2019/05/08 全球购物
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
《天游峰的扫路人》教学反思
2014/04/25 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python