Как сделать такую анимацию кнопок?

Question

[mxbeat]

Подскажите, как сделать такую анимацию кнопок, как здесь: https://decomaster.su/ - две кнопки по центру "в каталог" и "заказать дизайн-проект", чтобы при наведении мышки кружочки расплывались.
Может кто-то даст ссылку на туториал подобной анимации или подскажет, как вытащить соответствующий код с этого сайта?

Comments

[Сергей Сергей]

https://www.youtube.com/watch?v=PzMh6osfUaA

[RAX7]

https://codepen.io/search/pens?q=ripple+button

Answer 1

[Vest]

На самом деле весь код расположен в этом файле: https://decomaster.su/bitrix/templates/aspro_max/v...
Там всё просто, когда вы нажимаете на кнопку, то в DOM элементе генерируется прямо внутри кнопки. Есть разные варианты (например, здесь https://froyog.github.io/react-touch-ripple/ создают под элементом), но идея такая, что элементы "круглые" со своим временем жизни и стилем (ripple-animate).
Я думаю, что вы даже можете украсть этот плагин с того сайта, так как я не искал толком создателя.

Answer 2

[tyoma_koder]

при mouseenter вставляешь в кнопку абсолютно позиционированный элемент с анимацией, смещение этого элемента в кнопке рассчитываешь с помощью getBoundingClientRect и window.event.pageX и window.event.pageX по окончании анимации удаляешь