Данный эффект далеко не новый, все мы его знаем по Material Design. В этой статье я покажу свою версию этого эффекта для сайта на примере обычной кнопки. Стоит помнить, что данный эффект может быть применён не только к кнопке, но и к любому другому блоку.
Создаём кнопку
Для начала я накидал дизайн нашей будущей кнопки:
Для начала надо просто добавить кнопку на сайт. Для этого я написал следующий код:
HTML:
И, конечно же, CSS:
Стоит обратить внимание на стили элемента wave_elem, а именно на position и overflow. Всё остальное сделано только для красоты.
Создаём волны
Итак, приступим к созданию волны. Сама волна будет представлена тегом span, который будет расположен внутри самого тега button. Сам этот тег будет иметь следующие стили:
Стоит понимать, что эти стили обязательны. Без них наша волна работать не будет.
Итак, осталось только отследить нажатие и создать сам элемент. Важно то, что этот элемент должен появится в месте, где произошло нажатие. Для этого я написал следующий скрипт:
Вывод
Отлично! Мы получили кнопку, при нажатии на которую появляется волна. Как оказалось, это довольно просто и не займёт много времени. Этот проект имеет большой потенциал для дальнейшего развития, ведь мы сделали это на примере только одной кнопки, а в одном проекте их бывает по нескольку десятков.