Псевдокнопочки на CSS

Всё новое, это хорошо забытое старое, подумал я, читая How to make sexy buttons with CSS.

Технология сдвижных дверей, судя по всему, остаётся актуальной, пока не будет повсеместно введена поддержка CSS3.

Немного упростив вышеупомянутый код, спешу рассказать о сексуальных кнопочках.

Для создания нам понадобиться 1 картинка:

Верхняя часть, это фон обычной кнопки, нижняя — нажатой.

Небольшая иллюстрация для наглядности:

И совсем чуть-чуть CSS-кода:

a.button {
    background: url("button.gif") no-repeat top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px Arial, Sans-Serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px;
    text-decoration: none;
    outline: none;
}

a.button span {
    background: transparent url("button.gif") no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

a.button:active {
    background-position: bottom right;
    color: #000;
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px;
}

Сам html-код:

<a href="/" class="button"><span>Ok</span></a>

И пример реализации.