Я думаю каждый из вас знает, что оформление кнопок на сайте достаточно важный элемент, они позволяют выделить информацию из пользовательского интерфейса для дальнейшего взаимодействия из контентом на сайте. Сегодня мы бы хотели показать как разнообразные жидкие кнопки которые будут реагировать на наведения курсора мыши и тянуться за курсором. Такой прием оживит ваш интерфейс благодаря нестандартному подходу к их реализации, и как по мне, можно провести минуты просто играясь с ними и подбирая различные эффекты.

 

Если вы хотите создать по настоящему красочный веб-сайт с адаптивным и современным дизайном тогда посмотрите шаблоны от наших партнеров, там вы найдете много интересного.

Шаг 1. HTML

Кнопка у нас будет выводиться при помощи JS, по этому вам нужно подключить два скрипта, первый это для блока настройки, а второй непосредственно для самой кнопки:

Это вся разметка которая будет у нас в HTML, обратите внимание, что это только демонстрация возможностей реализации кнопок с помощью js, а не их практическое применение, кроме этого демо может некорректно работать в старых браузерах.

Шаг 2. CSS

Cтили у нас будут только для того, чтобы правильно отобразить позицию кнопки на странице:

Шаг 3. JS

Вся анимация у нас будет построенная следующим образом, кнопка у нас будет разбита на несколько слоем, при это каждый слой будет максимально стараться избегать курсор мыши создавая эффект bounce:

В результате у нас получился такой концепт жидкой кнопки. Материал предоставлен зарубежным источником, и предоставлен исключительно в ознакомительных целях.