<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>
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; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .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-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); }