Эффект нажатия на кнопку

У любой кнопки должны быть 3 состояния: обычное (default), ховер (hover) и состояние нажатия (active). Иногда необходимо четвертое состояние — неактивное (inactive).

Кнопки, которые невозможно повторить средствами ccs, делают через спрайты. Я часто вижу свои сверстанные макеты с кривым состоянием нажатия. Вот спрайт:

Заметно, что состояние клика смещено на несколько пикселей по оси Y. Тот же спрайт с направляющими:

Почему-то все, ну хорошо, почти все верстальщики, которые впервые верстают мои макеты, поднимают кнопку в состоянии клика выше, выравнивая по верхней границе, в надежде сделать как лучше или попросту поправить «баг» после дизайнера. В итоге получается вот такая анимация:

Получается, что кнопка подтягивает под себя тень. Заказчику чаще всего все равно и он не заметит, а то и не поймет разницу, но это, правда, ацтой. Нет эффекта вдавливания кнопки вместе с текстом в страницу сайта. Есть просто какое-то подергивание, обозначающее, что кнопка сработала. Не более.

Замечал так же, что некоторые верстальщики убирают текст из спрайта, при этом забывая (а может, просто ленясь) в состоянии клика его сдвигать по оси Y. Эффект вдавливания кнопки есть, но текст-то на месте остается. Это баг:

Оставьте так, как сделано в спрайте. Пусть будет красивая анимация вдавливания:

О, заметка из 2014-го. А вот вам видос из 2019-го: