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

Модификатор добавляет подсветку кнопки при наведении курсора
Инструкция по настройке
Шаблон страницы
Как добавить шаблон
43399184
Для корректной работы модификаций подключите библиотеку jQuery:
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
jQuery
Создаем Zero Block и открываем редактор
Задаем кнопке класс btn-flash
1 шаг
Создаем блок T123 и копируем в него код
2 шаг
Скопировать код
  1. Добавляем в том же зеро блоке шейпы размером 3х4 (оптимально: ширина 300px, высота 400px)
  2. Загружаем в них свои изображения
  3. Задаем всем изображениям одинаковый класс tistols-img-el
3 шаг
<!-- BTN06 - Модификация для Тильды. Подсветка фона у кнопки https://mod.tistols.com/button-backlight -->
<style>
    .btn-flash {
            position: absolute;
            cursor:pointer;
        }
        .btn-flash .tn-atom {
            overflow: hidden;
            position: relative; 
            z-index: 1!important;
        }
    .btn-flash .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, #625FFF, 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-flash:hover .tn-atom:before { 
            --size: 400px;
        }
</style>

<script>
$(document).ready(function () {
    $('.btn-flash .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>
Вам также может быть интересно: