Magnetic Hover Button

<button class="magnetic-btn">
  <span>Hover Me</span>
</button>

.magnetic-btn{
  padding:15px 34px;
  border:1px solid #8b5cf6;
  border-radius:12px;
  background:#8b5cf6;
  color:#ffffff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(139,92,246,.28);
  transition:
    transform .18s ease,
    box-shadow .25s ease;
  will-change:transform;
}

.magnetic-btn:hover{
  box-shadow:
    0 12px 32px rgba(139,92,246,.38),
    0 0 20px rgba(34,211,238,.12);
}

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

magneticBtn.addEventListener('mousemove', function(e){

  const rect = magneticBtn.getBoundingClientRect();

  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;

  magneticBtn.style.transform =
    `translate(${x * 0.28}px, ${y * 0.28}px)`;

});

magneticBtn.addEventListener('mouseleave', function(){

  magneticBtn.style.transform = 'translate(0, 0)';

});

How This Magnetic Hover Button Works

The Magnetic Hover Button moves slightly toward the cursor while the pointer is over the button. Its HTML is simple: a button with the magnetic-btn class contains a span for the “Hover Me” text.

The movement is handled by JavaScript. On every mousemove event, getBoundingClientRect() gets the button’s current position and dimensions. The script then calculates how far the cursor is from the horizontal and vertical center of the button.

Those X and Y values are multiplied by 0.28 before being applied with transform: translate(...). This limits how far the button moves, creating the magnetic-style movement instead of making the button jump directly to the cursor.

When the cursor leaves the button, the mouseleave event resets the transform to translate(0px, 0px). The CSS transform .18s ease transition makes the button return smoothly to its original position. The hover state also increases the purple shadow and adds a subtle cyan glow.

Customizing This Magnetic Hover Button

You can adjust the effect without changing the overall structure:

• Change the magnetic strength — the 0.28 multiplier in the JavaScript controls how strongly the button follows the cursor. Lower values create a softer effect, while higher values increase the movement.
• Adjust the return speed — the transform .18s ease transition controls how quickly the button responds and returns to its original position.
• Change the button color — update the #8b5cf6 background and border values to match your own design system.
• Modify the hover glow — the extra cyan glow inside .magnetic-btn:hover can be increased, reduced or removed depending on the style you want.
• Change the button size — edit the 15px 34px padding to create a smaller or larger call-to-action button.

Because the cursor offset is calculated using the button’s current dimensions, the movement automatically uses the button’s current width and height.

Where to Use This Magnetic Hover Button

A magnetic hover effect works well on interactive elements where you want the button to respond visually to cursor movement without using a large animation.

• Hero section call-to-action buttons, where cursor-based movement can add a visible interactive effect to the primary button.
• Portfolio websites, especially for project links, contact buttons or creative navigation.
• Landing pages, for signup, download or other primary action buttons that can use a cursor-following effect.
• Dashboard interfaces, for primary action buttons where a subtle cursor-following interaction fits the interface.

The 0.28 movement multiplier keeps the translation relatively small, so the button stays close to its original position while following the cursor.

Looking for another interactive button style? Check out your Loading Button component for a button that provides visual feedback while an action is being processed.

Frequently Asked Questions

Why does the button only move a short distance toward the cursor?
The JavaScript multiplies the cursor offset by 0.28 before applying the transform. This reduces the calculated X and Y movement, so the button moves only a fraction of the cursor’s distance from its center.

What happens when the cursor leaves the button?
The mouseleave event resets the transform to translate(0px, 0px). The CSS transition then smoothly moves the button back to its original position.

Can I make the magnetic effect stronger?
Yes. Increase the 0.28 multiplier in the JavaScript to increase the movement, or decrease it to reduce the movement.

Is this effect created with CSS only?
No. CSS handles the appearance, hover shadow and transitions, but JavaScript is responsible for tracking the cursor position and calculating the button movement.