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