html5 CSS3 渐变按钮
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cross-browser CSS gradient buttons demo</title>
<style>
body
{
background: #e5e5e5;
text-align: center;
}
/*----------------------------*/
.button
{
margin: 10px;
text-decoration: none;
font: bold 1.5em 'Trebuchet MS', Arial, Helvetica;
/*更变按钮的大小来个调整位置*/
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; /* 上边框样式 */
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;
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
{
/* 按钮点击 更变button位置,从而出现动态效果*/
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>
<!-- AdPacks -->
<style>
#adpacks-wrapper
{
font-family: Arial, Helvetica;
width: 280px;
position: fixed;
_position: absolute;
bottom: 0;
right: 20px;
z-index: 9999;
background: #eaeaea;
padding: 10px;
-moz-box-shadow: 0 0 15px #444;
-webkit-box-shadow: 0 0 15px #444;
box-shadow: 0 0 15px #444;
}
body .adpacks
{
background: #fff;
padding: 15px;
margin: 15px 0 0;
border: 3px solid #eee;
}
body .one .bsa_it_ad
{
background: transparent;
border: none;
font-family: inherit;
padding: 0;
margin: 0;
}
body .one .bsa_it_ad .bsa_it_i
{
display: block;
padding: 0;
float: left;
margin: 0 10px 0 0;
}
body .one .bsa_it_ad .bsa_it_i img
{
padding: 0;
border: none;
}
body .one .bsa_it_ad .bsa_it_t
{
padding: 0 0 6px 0;
font-size: 11px;
}
body .one .bsa_it_p {
display: none;
}
body #bsap_aplink,body #bsap_aplink:hover
{
display: block;
font-size: 9px;
margin: -15px 0 0 0;
text-align: right;
}
body .one .bsa_it_ad .bsa_it_d
{
font-size: 11px;
}
body .one
{
overflow: hidden
}
</style>
</head>
<body>
<h1>html5 CSS3 渐变按钮</h1>
<a href="http://www.clxgj.com" class="button button-khaki"><span>Button</span></a>
<a href="http://www.clxgj.com" class="button button-blue"><span>Button</span></a>
<a href="http://www.clxgj.com" class="button button-brown"><span>Button</span></a>
<br>
<a href="http://www.clxgj.com" class="button button-red"><span>Button</span></a>
<a href="http://www.clxgj.com" class="button button-purple"><span>Button</span></a>
<a href="http://www.clxgj.com" class="button button-green"><span>Button</span></a>
<br>
<a href="http://www.clxgj.com" class="button button-black"><span>Button</span></a>
<a href="http://www.clxgj.com" class="button button-orange"><span>Button</span></a>
<a href="http://www.clxgj.com" class="button button-silver"><span>Button</span></a>
</body>
</html>
截图如下: