css3 按钮 利用css3实现超酷下载按钮
建站知识 2021-07-03 08:43www.168986.cn长沙网站建设
效果图如下
代码如下
<!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;
: 5px;
left: 50px;
}
a.button div.arrow {
position: absolute;
left: 20px;
: 14px;
}
a.button div.arrow span. {
position: absolute;
width: 6px;
height: 9px;
background: #000;
: 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-: 8px solid black;
: 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(, #888, #333);
background-image: -moz-linear-gradient(, #888, #333);
background-image: -ms-linear-gradient(, #888, #333);
background-image: -o-linear-gradient(, #888, #333);
background-image: linear-gradient(, #888, #333);
text-shadow: 1px 1px 1px rgba(255,255,255,.2);
border-: 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. {
-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-: 8px solid rgba(255, 255, 255, 0.2) }
/ BLUE
================================================== /
a.blue {
background-color: #00aeef;
background-image: -webkit-linear-gradient(, #00aeef, #00587a);
background-image: -moz-linear-gradient(, #00aeef, #00587a);
background-image: -ms-linear-gradient(, #00aeef, #00587a);
background-image: -o-linear-gradient(, #00aeef, #00587a);
background-image: linear-gradient(, #00aeef, #00587a);
text-shadow: 1px 1px 1px #23aaff;
border-: 1px solid #23ff;
}
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. {
-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-: 8px solid #23aaff }
/ GREEN
================================================== /
a.green {
background-color: #68c800;
background-image: -webkit-linear-gradient(, #68c800, #367100);
background-image: -moz-linear-gradient(, #68c800, #367100);
background-image: -ms-linear-gradient(, #68c800, #367100);
background-image: -o-linear-gradient(, #68c800, #367100);
background-image: linear-gradient(, #68c800, #367100);
text-shadow: 1px 1px 1px #67c800;
border-: 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. {
-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-: 8px solid #67c800 }
/ RED
================================================== /
a.red {
background-color: #ee5f5b;
background-image: -webkit-linear-gradient(, #ee5f5b, #973431);
background-image: -moz-linear-gradient(, #ee5f5b, #973431);
background-image: -ms-linear-gradient(, #ee5f5b, #973431);
background-image: -o-linear-gradient(, #ee5f5b, #973431);
background-image: linear-gradient(, #ee5f5b, #973431);
text-shadow: 1px 1px 1px #ed5d69;
border-: 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. {
-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-: 8px solid #ed5d69 }
/ ORANGE
================================================== /
a.orange {
background-color: #ff8636;
background-image: -webkit-linear-gradient(, #ff8636, #9a3e00);
background-image: -moz-linear-gradient(, #ff8636, #9a3e00);
background-image: -ms-linear-gradient(, #ff8636, #9a3e00);
background-image: -o-linear-gradient(, #ff8636, #9a3e00);
background-image: linear-gradient(, #ff8636, #9a3e00);
text-shadow: 1px 1px 1px #ff7f42;
border-: 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. {
-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-: 8px solid #ff7f42 }
/ YELLOW
================================================== /
a.yellow {
background-color: #fcd116;
background-image: -webkit-linear-gradient(, #fcd116, #705b00);
background-image: -moz-linear-gradient(, #fcd116, #705b00);
background-image: -ms-linear-gradient(, #fcd116, #705b00);
background-image: -o-linear-gradient(, #fcd116, #705b00);
background-image: linear-gradient(, #fcd116, #705b00);
text-shadow: 1px 1px 1px #ffc33d;
border-: 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. {
-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-: 8px solid #ffc33d }
/ FOR DEMO PURPOSE ONLY
================================================== /
a.grey {
position: absolute;
: 80px;
left: 80px;
}
a.blue {
position: absolute;
: 80px;
left: 260px;
}
a.green {
position: absolute;
: 140px;
left: 80px;
}
a.red {
position: absolute;
: 140px;
left: 260px;
}
a.orange {
position: absolute;
: 200px;
left: 80px;
}
a.yellow {
position: absolute;
: 200px;
left: 260px;
}
</style>
</head>
<body>
<a href="http://cssdeck./item/20/download-button-set-no-images" style="position: absolute; : -1px; right: -1px; z-index: 1000; overflow: hidden; background: #c; 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=""></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
<a class="button blue">
<div class="arrow">
<span class=""></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
<a class="button green">
<div class="arrow">
<span class=""></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
<a class="button red">
<div class="arrow">
<span class=""></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
<a class="button orange">
<div class="arrow">
<span class=""></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
<a class="button yellow">
<div class="arrow">
<span class=""></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
</div>
</body>
</html>
代码如下
复制代码
代码如下:<!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;
: 5px;
left: 50px;
}
a.button div.arrow {
position: absolute;
left: 20px;
: 14px;
}
a.button div.arrow span. {
position: absolute;
width: 6px;
height: 9px;
background: #000;
: 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-: 8px solid black;
: 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(, #888, #333);
background-image: -moz-linear-gradient(, #888, #333);
background-image: -ms-linear-gradient(, #888, #333);
background-image: -o-linear-gradient(, #888, #333);
background-image: linear-gradient(, #888, #333);
text-shadow: 1px 1px 1px rgba(255,255,255,.2);
border-: 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. {
-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-: 8px solid rgba(255, 255, 255, 0.2) }
/ BLUE
================================================== /
a.blue {
background-color: #00aeef;
background-image: -webkit-linear-gradient(, #00aeef, #00587a);
background-image: -moz-linear-gradient(, #00aeef, #00587a);
background-image: -ms-linear-gradient(, #00aeef, #00587a);
background-image: -o-linear-gradient(, #00aeef, #00587a);
background-image: linear-gradient(, #00aeef, #00587a);
text-shadow: 1px 1px 1px #23aaff;
border-: 1px solid #23ff;
}
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. {
-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-: 8px solid #23aaff }
/ GREEN
================================================== /
a.green {
background-color: #68c800;
background-image: -webkit-linear-gradient(, #68c800, #367100);
background-image: -moz-linear-gradient(, #68c800, #367100);
background-image: -ms-linear-gradient(, #68c800, #367100);
background-image: -o-linear-gradient(, #68c800, #367100);
background-image: linear-gradient(, #68c800, #367100);
text-shadow: 1px 1px 1px #67c800;
border-: 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. {
-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-: 8px solid #67c800 }
/ RED
================================================== /
a.red {
background-color: #ee5f5b;
background-image: -webkit-linear-gradient(, #ee5f5b, #973431);
background-image: -moz-linear-gradient(, #ee5f5b, #973431);
background-image: -ms-linear-gradient(, #ee5f5b, #973431);
background-image: -o-linear-gradient(, #ee5f5b, #973431);
background-image: linear-gradient(, #ee5f5b, #973431);
text-shadow: 1px 1px 1px #ed5d69;
border-: 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. {
-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-: 8px solid #ed5d69 }
/ ORANGE
================================================== /
a.orange {
background-color: #ff8636;
background-image: -webkit-linear-gradient(, #ff8636, #9a3e00);
background-image: -moz-linear-gradient(, #ff8636, #9a3e00);
background-image: -ms-linear-gradient(, #ff8636, #9a3e00);
background-image: -o-linear-gradient(, #ff8636, #9a3e00);
background-image: linear-gradient(, #ff8636, #9a3e00);
text-shadow: 1px 1px 1px #ff7f42;
border-: 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. {
-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-: 8px solid #ff7f42 }
/ YELLOW
================================================== /
a.yellow {
background-color: #fcd116;
background-image: -webkit-linear-gradient(, #fcd116, #705b00);
background-image: -moz-linear-gradient(, #fcd116, #705b00);
background-image: -ms-linear-gradient(, #fcd116, #705b00);
background-image: -o-linear-gradient(, #fcd116, #705b00);
background-image: linear-gradient(, #fcd116, #705b00);
text-shadow: 1px 1px 1px #ffc33d;
border-: 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. {
-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-: 8px solid #ffc33d }
/ FOR DEMO PURPOSE ONLY
================================================== /
a.grey {
position: absolute;
: 80px;
left: 80px;
}
a.blue {
position: absolute;
: 80px;
left: 260px;
}
a.green {
position: absolute;
: 140px;
left: 80px;
}
a.red {
position: absolute;
: 140px;
left: 260px;
}
a.orange {
position: absolute;
: 200px;
left: 80px;
}
a.yellow {
position: absolute;
: 200px;
left: 260px;
}
</style>
</head>
<body>
<a href="http://cssdeck./item/20/download-button-set-no-images" style="position: absolute; : -1px; right: -1px; z-index: 1000; overflow: hidden; background: #c; 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=""></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
<a class="button blue">
<div class="arrow">
<span class=""></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
<a class="button green">
<div class="arrow">
<span class=""></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
<a class="button red">
<div class="arrow">
<span class=""></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
<a class="button orange">
<div class="arrow">
<span class=""></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
<a class="button yellow">
<div class="arrow">
<span class=""></span>
<span class="bottom"></span>
<span class="bottomShadow"></span>
</div>
<span class="bar"></span>
下载
</a>
</div>
</body>
</html>
上一篇：基于css3实现漂亮便签样式
下一篇：利用css3制作3D样式按钮实现代码
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML