Magnetic Button

<button class="mag-btn">Get Started</button>

.mag-btn {
  padding: 14px 36px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2,1,.3,1), box-shadow .3s;
}
.mag-btn:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}

document.querySelector('.mag-btn').addEventListener('mousemove', e => {
  const btn = e.currentTarget;
  const rect = btn.getBoundingClientRect();
  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;
  btn.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px)`;
});
document.querySelector('.mag-btn').addEventListener('mouseleave', e => {
  e.currentTarget.style.transform = 'translate(0, 0)';
});