Подсветка фона у кнопки

01 — 02

Демо-эффект

01

Интеграция в интерфейсе

02

Подсветка фона у кнопки

02 — 02

Демо-эффект

01

Интеграция в интерфейсе

02

Подключение кода

Скопировать шаблон

Модификатор добавляет подсветку кнопки при наведении курсора

Описание

Смотреть пример

id номер:

67536359

Шаблон страницы

Номер скопирован!

Скопировать номер

Добавляем кнопку

Задаем ей CSS-класс btn-sonneto-primary

Создаем блок T123 и копируем в него код

2 шаг

Код скопирован!

Скопировать код

Создаем Zero Block и открываем редактор

1 шаг

<style>
.btn-sonneto-primary {
position: absolute;
cursor:pointer;
}
.btn-sonneto-primary .tn-atom {
overflow: hidden;
position: relative;
z-index: 1!important;
}
.btn-sonneto-primary .tn-atom:before {
--size: 0;
content: '';
position: absolute;
left: var(--before-x);
top: var(--before-y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #E8FF6F, transparent);
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: width 0.2s ease, height 0.2s ease;
transition: width 0.2s ease, height 0.2s ease;
z-index: -1;
}
.btn-sonneto-primary:hover .tn-atom:before {
--size: 400px;
}
</style>

<script>
$(document).ready(function () {
$('.btn-sonneto-primary .tn-atom').on('mousemove', function (e) {
var $this = $(this),
btnOffset = $this.parent().offset(),
xPos = parseInt(e.pageX - btnOffset.left),
yPos = parseInt(e.pageY - btnOffset.top);

$this.css('--x', xPos + 'px');
$this.css('--y', yPos + 'px');

var beforeElement = $this[0].style;
beforeElement.setProperty('--before-x', xPos + 'px');
beforeElement.setProperty('--before-y', yPos + 'px');
});
});

</script>