У будь-яку кнопку повинні бути 3 стану: звичайне (default), ховер (hover) і стан натискання (active). Іноді необхідно четвертий стан - неактивне (inactive).
Кнопки, які неможливо повторити засобами ccs, роблять через спрайт. Я часто бачу свої зверстані макети з кривим станом натискання. Ось спрайт:
Помітно, що стан кліка зміщено на кілька пікселів по осі Y. Той же спрайт з направляючими:
Чомусь всі, ну добре, майже всі верстальники, які вперше верстають мої макети, піднімають кнопку в стані кліка вище, вирівнюючи по верхній межі, в надії зробити як краще або просто поправити «баг» після дизайнера. У підсумку виходить ось така анімація:
Виходить, що кнопка підтягує під себе тінь. Замовнику найчастіше все одно і він не помітить, а то й не зрозуміє різницю, але це, правда, ацтой. Немає ефекту вдавлення кнопки разом з текстом в сторінку сайту. Є просто якесь сіпання, що позначає, що кнопка спрацювала. Не більше.
Помічав так само, що деякі верстальники прибирають текст з спрайту, при цьому забуваючи (а може, просто лінуючись) в стані кліка його зрушувати по осі Y. Ефект вдавлення кнопки є, але текст-то на місці залишається. Це баг:
Будь ласка, не вирівнюйте кнопку по Y по верхньому краю в стані натискання
Залиште так, як зроблено в спрайт. Нехай буде красива анімація вдавлення: