<section class="demo">
<button type="button" class="demo__btn" id="magneticBtn">
<span>Hover me</span>
</button>
</section>.demo {
min-height: 100vh;
width: 100%;
display: grid;
place-items: center;
background: #0c0c0e;
font-family: system-ui, sans-serif;
}
.demo__btn {
position: relative;
border: 0;
border-radius: 999px;
padding: 16px 28px;
background: #b6ff4d;
color: #111;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.demo__btn span {
display: inline-block;
pointer-events: none;
}const btn = document.querySelector("#magneticBtn");
const strength = 0.35;
if (btn) {
btn.addEventListener("mousemove", function (event) {
const rect = btn.getBoundingClientRect();
const x = event.clientX - rect.left - rect.width / 2;
const y = event.clientY - rect.top - rect.height / 2;
gsap.to(btn, { x: x * strength, y: y * strength, duration: 0.35, ease: "power3.out" });
});
btn.addEventListener("mouseleave", function () {
gsap.to(btn, { x: 0, y: 0, duration: 0.6, ease: "elastic.out(1, 0.4)" });
});
}
