Manyetik Hover Butonu

<div class="mag-wrapper">
  <button class="mag-btn" id="magBtn">
    <span class="mag-text">Manyetik Buton</span>
  </button>
</div>

.mag-wrapper {
  display: flex; align-items: center; justify-content: center;
  width: 300px; height: 200px; font-family: 'Inter', sans-serif;
}
.mag-btn {
  position: relative; padding: 18px 40px; font-size: 16px; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, #6C5CE7, #00cec9);
  border: none; border-radius: 50px; cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.3s;
  box-shadow: 0 8px 25px rgba(108,92,231,0.4);
  overflow: hidden;
}
.mag-btn::before {
  content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.15);
  border-radius: 50px; opacity: 0; transition: opacity 0.3s;
}
.mag-btn:hover::before { opacity: 1; }
.mag-btn:hover {
  box-shadow: 0 15px 35px rgba(108,92,231,0.6);
}
.mag-text { position: relative; z-index: 1; }

const btn = document.getElementById('magBtn');
const wrapper = btn.parentElement;

wrapper.addEventListener('mousemove', (e) => {
  const rect = btn.getBoundingClientRect();
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;
  const distX = e.clientX - centerX;
  const distY = e.clientY - centerY;
  const strength = 0.4;
  btn.style.transform = `translate(${distX * strength}px, ${distY * strength}px)`;
});

wrapper.addEventListener('mouseleave', () => {
  btn.style.transform = 'translate(0, 0)';
});