按钮背景过渡css3,CSS3 一组拟物风格的渐变背景按钮

CSS

语言：

CSSSCSS

确定

a {

background-image: linear-gradient(lightblue, skyblue);

border: 1px solid #eee;

border-radius: 3px;

color: grey;

display: inline-block;

line-height: 32px;

padding: 0 15px;

text-decoration: none;

transition: none;

vertical-align: top;

}

.button-grey {

background-color: #f2f2f2;

background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);

border: 1px solid #bfbfbf;

box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px rgba(0, 0, 0, 0.2);

color: #8c8c8c;

text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);

}

.button-grey:hover,

.button-grey:focus {

background: #f2f2f2;

border-color: #8c8c8c;

box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;

}

.button-grey:active {

background: #f2f2f2;

box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);

}

.button-blue {

background-color: #42b0e3;

background-image: linear-gradient(to bottom, #42b0e3, #2ba9e3);

border: 1px solid #107db0;

box-shadow: inset 0 1px 0 #7cd4fc, inset 0 -1px 0 #2696c9, inset 0 0 0 1px #59b7e3, 0 2px 4px rgba(0, 0, 0, 0.2);

color: white;

text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

}

.button-blue:hover,

.button-blue:focus {

background: #2ba9e3;

border-color: #004c6f;

box-shadow: inset 0 1px 0 #7cd4fc, inset 0 -1px 0 #2696c9, inset 0 0 0 1px #59b7e3;

}

.button-blue:active {

background: #2ba9e3;

box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);

}

.button-green {

background-color: #97cc76;

background-image: linear-gradient(to bottom, #97cc76, #8bcc62);

border: 1px solid #5f993a;

box-shadow: inset 0 1px 0 #c6e5b3, inset 0 -1px 0 #79b356, inset 0 0 0 1px #a4cc8b, 0 2px 4px rgba(0, 0, 0, 0.2);

color: white;

text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

}

.button-green:hover,

.button-green:focus {

background: #8bcc62;

border-color: #326612;

box-shadow: inset 0 1px 0 #c6e5b3, inset 0 -1px 0 #79b356, inset 0 0 0 1px #a4cc8b;

}

.button-green:active {

background: #8bcc62;

box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);

}

.button-purple {

background-color: #847bba;

background-image: linear-gradient(to bottom, #847bba, #7568ba);

border: 1px solid #493e87;

box-shadow: inset 0 1px 0 #bab6d4, inset 0 -1px 0 #655aa1, inset 0 0 0 1px #948dba, 0 2px 4px rgba(0, 0, 0, 0.2);

color: white;

text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

}

.button-purple:hover,

.button-purple:focus {

background: #7568ba;

border-color: #1f1654;

box-shadow: inset 0 1px 0 #bab6d4, inset 0 -1px 0 #655aa1, inset 0 0 0 1px #948dba;

}

.button-purple:active {

background: #7568ba;

box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);

}

.button-orange {

background-color: #f58a38;

background-image: linear-gradient(to bottom, #f58a38, #f57c20);

border: 1px solid #c25706;

box-shadow: inset 0 1px 0 #ffb984, inset 0 -1px 0 #db6f1d, inset 0 0 0 1px #f59851, 0 2px 4px rgba(0, 0, 0, 0.2);

color: white;

text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

}

.button-orange:hover,

.button-orange:focus {

background: #f57c20;

border-color: #730;

box-shadow: inset 0 1px 0 #ffb984, inset 0 -1px 0 #db6f1d, inset 0 0 0 1px #f59851;

}

.button-orange:active {

background: #f57c20;

box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);

}

.button-red {

background-color: #ed6d64;

background-image: linear-gradient(to bottom, #ed6d64, #ed574c);

border: 1px solid #ba3329;

box-shadow: inset 0 1px 0 #ffb0aa, inset 0 -1px 0 #d44d44, inset 0 0 0 1px #ed837b, 0 2px 4px rgba(0, 0, 0, 0.2);

color: white;

text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

}

.button-red:hover,

.button-red:focus {

background: #ed574c;

border-color: #870c03;

box-shadow: inset 0 1px 0 #ffb0aa, inset 0 -1px 0 #d44d44, inset 0 0 0 1px #ed837b;

}

.button-red:active {

background: #ed574c;

box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);

}

.button-yellow {

background-color: #fce374;

background-image: linear-gradient(to bottom, #fce374, #fcdf5b);

border: 1px solid #c9ae34;

box-shadow: inset 0 1px 0 #fff6ce, inset 0 -1px 0 #e3c852, inset 0 0 0 1px #fce88d, 0 2px 4px rgba(0, 0, 0, 0.2);

color: #967d09;

text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);

}

.button-yellow:hover,

.button-yellow:focus {

background: #fcdf5b;

border-color: #967d09;

box-shadow: inset 0 1px 0 #fff6ce, inset 0 -1px 0 #e3c852, inset 0 0 0 1px #fce88d;

}

.button-yellow:active {

background: #fcdf5b;

box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);

}