Как сделать нажатую кнопку в css

Дамы и господа, не так давно предо мной встала, с первого взгляда, нехитрая задача. Имелась кнопка нарисованная дизайнером с растровым деревянным фоном. В одном визуальном варианте. Естественно, нужно было каким-либо образом оформить нажатие этой html кнопки. Как говорится, внимание, вопрос - как сделать нажатую кнопку в css?

например, такая

В голове, естесственно, крутилась мысль провернуть такую операцию при помощи CSS. Эффект нажатия обычно реализуют при помощи теней, которые чередуются сверху вниз и наоборот.
Но, так как фон растровый, поменять его при помощи CSS оказалось, мягко говоря, проблематично. Каких либо готовых кнопок с похожей текстурой и различными вариантами нажатия найти практически нереально, самому рисовать - ну его н@хер.


После несколькочасового ковыряния интернетов выяснилось, что кнопку с растровым фоном нормальные люди вообще не делают. Его невозможно оперативно изменить, подкорректировать, поменять. Во всех современных компаниях нажатая кнопка css создается при помощи градиента, теней, заливки и собственно текста.

В итоге, на "надцатом" сайте с примерами я увидел замечательное исполнение нажатия - простое опускание кнопки на 2px вниз. Попробовав такой вариант у себя на сайте - понял что он смотрится довольно симпатично. А проблема с динамическим изменением фона, как минимум, отодвигается на второй план (можно реализовать наведение простым осветлением всего элемента или затемнением, правда это уже по желанию).

В качестве примера привожу простейший кода CSS для нажатого состояния класса ".button".

.button:active {
    position: relative;
    top: 2px;
}

Рабочий пример кнопки прилагается:

нажми на меня

Вот такое решение данного интересного вопроса. А уродоваться с растром, фотошопом, и кучей вариантов отображения я не собираюсь и вам не советую)