Как сделать переливающуюся кнопку в тильде

Эффект кнопок в стиле Material design для Tilda

Как сделать переливающуюся кнопку в тильде. Смотреть фото Как сделать переливающуюся кнопку в тильде. Смотреть картинку Как сделать переливающуюся кнопку в тильде. Картинка про Как сделать переливающуюся кнопку в тильде. Фото Как сделать переливающуюся кнопку в тильде

Как сделать переливающуюся кнопку в тильде. Смотреть фото Как сделать переливающуюся кнопку в тильде. Смотреть картинку Как сделать переливающуюся кнопку в тильде. Картинка про Как сделать переливающуюся кнопку в тильде. Фото Как сделать переливающуюся кнопку в тильде

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

Данный метод достаточно прост, т.к. я заранее подготовил готовые файлы css и js для поключения к вашему проекту.

Кнопки в стиле Material design для Tilda

Эффект для кнопок в Zero block

Зайдите в редактор, создайте любой элемент, кликните по нему правой кнопкой мыши, в выпадающем меню выберите последний пункт «Add CSS Class Name» (см. изображение).

Как сделать переливающуюся кнопку в тильде. Смотреть фото Как сделать переливающуюся кнопку в тильде. Смотреть картинку Как сделать переливающуюся кнопку в тильде. Картинка про Как сделать переливающуюся кнопку в тильде. Фото Как сделать переливающуюся кнопку в тильде

Напишите свое значение, например ripple-white, класс указывается без точки.

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

Я задал в редакторе цвет кнопок и выставил border-radius, остальное в примере ниже.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *