<!--Стили эффекта-->
<link rel="stylesheet" href="https://style.anku.im/ripple-min.css" type="text/css" media="all">
<!--Скрипт эффекта -->
<script src="https://style.anku.im/ripple.js"></script>
<!--Инициируем скрипт -->
<script>
$(".ripple-white .tn-atom, .ripple-black .tn-atom").ripple();
// моим кнопкам из примера присвоены классы .ripple-white и .ripple-black, можете заменить на произвольные
</script>
<!--
Задаем цвет волны
Для вставки в T123 или в head страницы/сайта
Класс кнопки меняем на свой
-->
<style>
.ripple-white .legitRipple-ripple {
background: rgba(255, 255, 255, 0.4);
}
.ripple-black .legitRipple-ripple {
background: rgba(0, 0, 0, 0.4);
}
</style>
/*
Задаем цвет волны
Для вставки в редактор css в настройках сайта
Класс кнопки меняем на свой
*/
.ripple-white .legitRipple-ripple {
background: rgba(255, 255, 255, 0.4);
}
.ripple-black .legitRipple-ripple {
background: rgba(0, 0, 0, 0.4);
}
<!--Вариант 1 -->
<script>
$(".t142 .t-btn").ripple();
</script>
<!--Вариант 2 -->
<script>
$(".standart-btn").ripple();
</script>
<!--Присваиваем класс кнопке-->
<script>
$('#rec249895618 .t142 .t-btn').addClass('standart-btn');
</script>
<!--Стиль кнопок-->
<style>
/*btn*/
.ripple-white,
.ripple-black,
.standart-btn {
overflow:hidden!important;
border-radius:3px!important;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
cursor:pointer;
transition: box-shadow .3s ease-in-out!important;
}
.ripple-white:hover,
.ripple-black:hover,
.standart-btn:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.ripple-white:active,
.ripple-black:active,
.standart-btn:active {
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
transition:box-shadow .1s ease-in-out!important;
}
.ripple-white .legitRipple-ripple {
background: rgba(255, 255, 255, 0.4);
}
.ripple-black .legitRipple-ripple {
background: rgba(0, 0, 0, 0.4);
}
</style>