9种样式CSS3 渐变按钮集

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 3D渐变按钮代码</title>
 <style>
 body
 {
 background: #e5e5e5;
 text-align: center;
 }
 .button
 {
 margin: 10px;
 text-decoration: none;
 font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
 display: inline-block;
 text-align: center;
 color: #fff;
 border: 1px solid #9c9c9c; 
 border: 1px solid rgba(0, 0, 0, 0.3); 
 text-shadow: 0 1px 0 rgba(0,0,0,0.4);
 box-shadow: 0 0 .05em rgba(0,0,0,0.4);
 -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
 -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
 }
 .button, .button span
 {
 -moz-border-radius: .3em;
 border-radius: .3em;
 }
 .button span
 {
 border-top: 1px solid #fff; /* Fallback style */
 border-top: 1px solid rgba(255, 255, 255, 0.5);
 display: block;
 padding: 0.5em 2.5em;
 background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
 -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
 background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
 -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
 -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
 -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
 -moz-background-size: 3px 3px;
 -webkit-background-size: 3px 3px; 
 }
 .button:hover
 {
 box-shadow: 0 0 .1em rgba(0,0,0,0.4);
 -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
 -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
 }
 .button:active
 {
 position: relative;
 top: 1px;
 }
 .button-khaki
 {
 background: #A2B598;
 background: -webkit-gradient(linear, left top, left bottom, from(#BDD1B4), to(#A2B598) );
 background:-moz-linear-gradient(-90deg, #BDD1B4, #A2B598);
 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#BDD1B4', EndColorStr='#A2B598'); 
 }
 .button-khaki:hover
 { 
 background: #BDD1B4;
 background: -webkit-gradient(linear, left top, left bottom, from(#A2B598), to(#BDD1B4) );
 background: -moz-linear-gradient(-90deg, #A2B598, #BDD1B4);
 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#A2B598', EndColorStr='#BDD1B4');
 }
 .button-khaki:active
 {
 background: #A2B598;
 }
 .button-blue
 {
 background: #4477a1;
 background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
 background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
 }
 .button-blue:hover
 {
 background: #81a8cb;
 background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
 background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb'); 
 }
 
 .button-blue:active
 {
 background: #4477a1;
 }
 .button-brown
 {
 background: #8f3714;
 background: -webkit-gradient(linear, left top, left bottom, from(#bf6f50), to(#8f3714) );
 background: -moz-linear-gradient(-90deg, #bf6f50, #8f3714);
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#bf6f50', EndColorStr='#8f3714');
 }
 
 .button-brown:hover
 {
 background: #bf6f50;
 background: -webkit-gradient(linear, left top, left bottom, from(#8f3714), to(#bf6f50) );
 background: -moz-linear-gradient(-90deg, #8f3714, #bf6f50);
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#8f3714', EndColorStr='#bf6f50');
 }
 .button-brown:active
 {
 background: #8f3714;
 }
 .button-green
 {
 background: #428739;
 background: -webkit-gradient(linear, left top, left bottom, from(#c8dd95), to(#428739) );
 background: -moz-linear-gradient(-90deg, #c8dd95, #428739);
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c8dd95', EndColorStr='#428739');
 }
 .button-green:hover
 {
 background: #c8dd95;
 background: -webkit-gradient(linear, left top, left bottom, from(#428739), to(#c8dd95) );
 background: -moz-linear-gradient(-90deg, #428739, #c8dd95);
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#428739', EndColorStr='#c8dd95');
 }
 .button-green:active
 {
 background: #428739;
 }
 .button-red
 {
 background: #D82741;
 background: -webkit-gradient(linear, left top, left bottom, from(#E84B6E), to(#D82741) );
 background: -moz-linear-gradient(-90deg, #E84B6E, #D82741);
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E84B6E', EndColorStr='#D82741');
 }
 .button-red:hover
 {
 background: #E84B6E;
 background: -webkit-gradient(linear, left top, left bottom, from(#D82741), to(#E84B6E) );
 background: -moz-linear-gradient(-90deg, #D82741, #E84B6E);
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D82741', EndColorStr='#E84B6E');
 }
 .button-red:active
 {
 background: #D82741;
 }
 .button-purple
 {
 background: #6F50E7;
 background: -webkit-gradient(linear, left top, left bottom, from(#B8A9F3), to(#6F50E7) );
 background: -moz-linear-gradient(-90deg, #B8A9F3, #6F50E7);
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B8A9F3', EndColorStr='#6F50E7');
 }
 .button-purple:hover
 {
 background: #B8A9F3;
 background: -webkit-gradient(linear, left top, left bottom, from(#6F50E7), to(#B8A9F3) );
 background: -moz-linear-gradient(-90deg, #6F50E7, #B8A9F3);
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#6F50E7', EndColorStr='#B8A9F3');
 }
 
 .button-purple:active
 {
 background: #6F50E7;
 }
 .button-black
 {
 background: #141414;
 background: -webkit-gradient(linear, left top, left bottom, from(#656565), to(#141414) );
 background: -moz-linear-gradient(-90deg, #656565, #141414);
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#656565', EndColorStr='#141414');
 }
 .button-black:hover
 {
 background: #656565;
 background: -webkit-gradient(linear, left top, left bottom, from(#141414), to(#656565) );
 background: -moz-linear-gradient(-90deg, #141414, #656565);
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#141414', EndColorStr='#656565');
 }
 .button-black:active
 {
 background: #141414;
 }
 .button-orange
 {
 background: #f09c15;
 background: -webkit-gradient(linear, left top, left bottom, from(#f8c939), to(#f09c15) );
 background: -moz-linear-gradient(-90deg, #f8c939, #f09c15);
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f8c939', EndColorStr='#f09c15');
 }
 .button-orange:hover
 {
 background: #f8c939;
 background: -webkit-gradient(linear, left top, left bottom, from(#f09c15), to(#f8c939) );
 background: -moz-linear-gradient(-90deg, #f09c15, #f8c939);
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f09c15', EndColorStr='#f8c939');
 }
 .button-orange:active
 {
 background: #f09c15;
 }
 .button-silver
 {
 background: #c5c5c5;
 background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#c5c5c5) );
 background: -moz-linear-gradient(-90deg, #eaeaea, #c5c5c5);
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#eaeaea', EndColorStr='#c5c5c5');
 }
 .button-silver:hover
 {
 background: #eaeaea;
 background: -webkit-gradient(linear, left top, left bottom, from(#c5c5c5), to(#eaeaea) );
 background: -moz-linear-gradient(-90deg, #c5c5c5, #eaeaea);
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c5c5c5', EndColorStr='#eaeaea');
 }
 
 .button-silver:active
 {
 background: #c5c5c5;
 } 
 </style>
</head>
<body>
 <h1>Cross-browser CSS gradient buttons</h1>
 <a href="#" class="button button-khaki">Button</a>
 <a href="/" class="button button-blue">源码下载</a>
 <a href="#" class="button button-brown">Button</a>
 
 <a href="#" class="button button-red">Button</a>
 <a href="#" class="button button-purple">网页特效</a>
 <a href="#" class="button button-green">Button</a>
 
 <a href="#" class="button button-black">Button</a>
 <a href="#" class="button button-orange">Button</a>
 <a href="#" class="button button-silver">Button</a>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

9种样式CSS3 渐变按钮集

分类

CSS3

描述

一款多风格、多样式的CSS3 3D渐变按钮，一共有9款不同的颜色风格，未使用任何的JS代码和图片，即使在不支持CSS3的IE8浏览器中，虽然看不到3D和按钮背景效果，但按钮的颜色渐变效果同样是十分漂亮的，鼠标移到按钮上后，按钮变色、显示出...