Інтерактивні кнопки з CSS, без використання зображень

Графічні інтерактивні кнопки, які будуть міняти властивості в залежності від дій користувача, можна створити з CSS без використання зображень. На зразок:

CSS:

a {

display: block;

width: 6.6em;

height: 1.4em;

text-align: center;

text-decoration: none;

border: 1px solid #66a300;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

border-radius: 6px;

background-image: -webkit-gradient (linear, left top, left bottom, from (#abe145), to (#67a400)); (Для створення градієнта, діє в Safari)

background-color: #8cca12;

color: #fff;

text-shadow: 2px 2px 2px #66a300

-moz-box-shadow: 2px 2px 2px #ccc;

-webkit-box-shadow: 2px 2px 2px #ccc;

box-shadow: 2px 2px 2px #ccc;

-webkit-box-reflect: below 2px -webkit-gradient (linear, left top, left bottom, from (transparent), color-stop (0.52, transparent), to (white)); (Маска-градієнт з ефектом відображення, діє в Safari) }