Magnetic Hover Effect: Creating Cursor-Attracted Buttons with Vanilla JavaScript

In this article, we will build a magnetic hover effect using only vanilla JavaScript and CSS transforms. The implementation is lightweight, easy to control, and optimized for smooth performance without relying on external libraries.

Demo Effect

HTML

The HTML structure for the magnetic hover effect is intentionally minimal. We only need a single interactive element, such as a button or link. JavaScript will track the cursor position relative to this element and apply the appropriate transform.

<button class="magnetic-btn">Hover me</button>

CSS: Preparing the Motion Behavior

CSS defines the visual appearance and ensures smooth motion. The transition property prevents abrupt jumps, while will-change helps the browser optimize rendering performance during movement.

.magnetic-btn {
  padding: 16px 40px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: #1f1f1f;
  color: #ffffff;

  transition: transform 0.25s ease-out;
  will-change: transform;
}

JavaScript: Applying the Magnetic Force

JavaScript continuously measures the distance between the cursor and the center of the element. When the cursor enters a defined range, the element is translated toward the cursor, creating the illusion of a magnetic force. Once the cursor moves away, the element smoothly returns to its original position.

const magnetic = document.querySelector('.magnetic-btn');

document.addEventListener('mousemove', (e) => {
  const rect = magnetic.getBoundingClientRect();
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;

  const deltaX = e.clientX - centerX;
  const deltaY = e.clientY - centerY;

  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
  const maxDistance = 120;

  if (distance < maxDistance) {
    magnetic.style.transform = `translate(${deltaX * 0.25}px, ${deltaY * 0.25}px)`;
  } else {
    magnetic.style.transform = 'translate(0, 0)';
  }
});

Why the Magnetic Hover Effect Feels Premium

• Movement is directly tied to cursor position, creating instant feedback
• No complex keyframe animations are required
• Works equally well for buttons, links, icons, and text
• Easy to combine with hover states, shadows, or scaling effects

Customization and Extensions

The magnetic hover effect is highly flexible and can be customized to match different design needs.

• Adjust the 0.25 multiplier to control the magnetic strength
• Reduce maxDistance to limit activation to close proximity
• Combine with scale() or box-shadow for richer interactions
• Use requestAnimationFrame for ultra-smooth motion

Conclusion

The magnetic hover effect is a small interaction with a big impact on user experience. With just a bit of JavaScript and CSS transforms, you can make interface elements feel more alive, responsive, and polished without sacrificing performance or maintainability.