Кнопка, которая «заливается» при наведении!

Большой округлый слой поднимается снизу и покрывает элемент, создавая плавный анимационный переход. За счёт формы слоя и правильной кривой движение выглядит естественно.

Как работает:

• Псевдо-элемент ::before выступает как анимируемый заливочный слой;

• В обычном состоянии он находится за пределами кнопки;

• При наведении слой смещается вверх и перекрывает элемент, а текст своевременно меняет цвет.

Простой приём, который добавляет интерфейсу динамику без единой строки JavaScript.

Code Ready | #фишка