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

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

btns01

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

btns02

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

bad-1

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

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

bad-2

Пожалуйста, не выравнивайте кнопку по Y по верхнему краю в состоянии нажатия

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

good3

Оставить комментарий

Такая эл. почта уже зарегистрирована. Воспользуйтесь формой входа или введите другую.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.
3 комментария

Кнопка, подтягивающая за собой тень - это видимо какое-то нововведение верстальщиков 🙂

А код можно ?)

Эта заметка устарела малость. Другими словами, картинки в качестве фона кнопок — та еще шляпа нынче ).