Ховеры кнопок: четыре варианта

Наведите курсор на кнопки. Переключатель справа включает состояние «при наведении» у всех сразу, чтобы сравнить.

0

Сдержанный

Фон темнеет на тон, иконка сдвигается на 2px, у ссылки уезжает стрелка. 180 мс. Самый «тихий» вариант, ничего не отвлекает.

+7 (963) 738-54-53 Подробнее
A

Заливка от иконки

Новый цвет расходится кругом из-под иконки и заполняет кнопку (clip-path circle, 450 мс). Белая кнопка становится зелёной, текст белым. Календарь «ставит галочку», трубка вздрагивает как при звонке. У ссылки подчёркивание прорисовывается слева направо.

+7 (963) 738-54-53 Подробнее
B

Перекат текста и иконка «насквозь»

Надпись уезжает вверх, снизу въезжает её копия (400 мс, как у Codrops). Иконка календаря и стрелка вылетают вправо и возвращаются слева, трубка звонит. Фон темнеет на тон. Эффект живой, но не меняет форму кнопки.

+7 (963) 738-54-53 Подробнее
C

Иконка в кружке и сдвиг заливки

Иконка живёт в круглом бейдже. При наведении заливка проезжает слева направо (450 мс), бейдж инвертируется: на зелёной кнопке становится белым, на белой зелёным. Текст чуть сдвигается вслед за заливкой. У ссылки стрелка в кружке заливается зелёным.

+7 (963) 738-54-53 Подробнее

На телефонах ховера нет: во всех вариантах при нажатии кнопка чуть сжимается (scale 0.98). При включённом «уменьшении движения» в системе анимации отключаются.