Кнопки с градиентом

by webref

HTML

<a class="button-grey">Кнопка</a>
<a class="button-yellow">Кнопка</a>
<a class="button-orange">Кнопка</a>
<a class="button-red">Кнопка</a>
<a class="button-purple">Кнопка</a>
<a class="button-blue">Кнопка</a>
<a class="button-green">Кнопка</a>

CSS

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;
}
a:hover {
  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;  
}
.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-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-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-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-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;
   ...