9种样式CSS3 渐变按钮集 (实用）

原文出处：https://blog.csdn.net/life66881/article/details/46440345
效果图：

html|
 

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<h1>Cross-browser CSS gradient buttons</h1>
<a href="#" class="button button-khaki"><span>Button</span></a>
<a href="/" class="button button-blue"><span>Button</span></a>
<a href="#" class="button button-brown"><span>Button</span></a>
<br>
<a href="#" class="button button-red"><span>Button</span></a>
<a href="#" class="button button-purple"><span>Button</span></a>
<a href="#" class="button button-green"><span>Button</span></a>
<br>
<a href="#" class="button button-black"><span>Button</span></a>
<a href="#" class="button button-orange"><span>Button</span></a>
<a href="#" class="button button-silver"><span>Button</span></a>

css

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;
 }