Анимация кнопок в Tilda: как сделать ваш сайт более привлекательным

<style>
.glow-on-hover {
    background: #111; /* Цвет кнопки */
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
</style>

<style>
    .magnit__button {
        cursor: pointer;
    }
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>

<script>
    function applyMagneticEffect($elements) {
    $elements.each(function() {
        let $self = $(this);
        let hover = false;
        let offsetHoverMax = $self.attr("offset-hover-max") || 1;
        let offsetHoverMin = $self.attr("offset-hover-min") || 0.75;

        // Функция для привязки событий
        let attachEventListeners = function() {
            $(window).on("mousemove", function(e) {
                let hoverArea = hover ? offsetHoverMax : offsetHoverMin;
                let cursor = {
                    x: e.clientX,
                    y: e.clientY + $(window).scrollTop()
                };

                let width = $self.outerWidth();
                let height = $self.outerHeight();
                let offset = $self.offset();
                let elPos = {
                    x: offset.left + width / 2,
                    y: offset.top + height / 2
                };

                let x = cursor.x - elPos.x;
                let y = cursor.y - elPos.y;
                let dist = Math.sqrt(x * x + y * y);
                let mutHover = false;

                if (dist < width * hoverArea) {
                    mutHover = true;
                    if (!hover) {
                        hover = true;
                    }
                    onHover(x, y);
                }

                if (!mutHover && hover) {
                    onLeave();
                    hover = false;
                }
            });
        };

        // Функция для обработки события "наведения"
        let onHover = function(x, y) {
            TweenMax.to($self, 0.4, {
                x: x * 0.8,
                y: y * 0.8,
                rotation: x * 0.05,
                ease: Power2.easeOut
            });
        };

        // Функция для обработки события "покидания"
        let onLeave = function() {
            TweenMax.to($self, 0.7, {
                x: 0,
                y: 0,
                scale: 1,
                rotation: 0,
                ease: Elastic.easeOut.config(1.2, 0.4)
            });
        };

        attachEventListeners();
    });
};

// Применяем эффект магнитной кнопки к элементам с классом ".magnit__button"
applyMagneticEffect($(".magnit__button"));

</script>