Пример работы

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

Модификатор добавляет подсветку кнопки при наведении курсора
Коллекция / Подсветка фона у кнопки
1. В зеро блоке добавляем кнопку и задаем ей класс .btn-flash
2. Добавляем блок T123 и копируем в него код
Скопировать код
<!-- 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>
Добавьте шаблон страницы к себе в проект.
  1. Нажмите на кнопку "Создать новую страницу"
  2. Пролистайте до конца
  3. В "Указать ID страницы" напишите номер 43399184
Вам также может быть интересно: