<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) {
        if ($(window).width() > 980) {
            $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();
            });
        }
    };

    $(document).ready(function() {
        applyMagneticEffect($(".magnit__button"));
    });
</script>