Magnetic Cursor

<div class="magnetic-demo-area">

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

</div>

.magnetic-demo-area{
  position:relative;
  width:100%;
  min-height:220px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}

.magnetic-btn{
  padding:16px 30px;

  border:1px solid #22d3ee;
  border-radius:12px;

  background:#0b1423;
  color:#ffffff;

  font-size:15px;
  font-weight:700;

  cursor:pointer;

  transform:translate(0, 0);

  box-shadow:
    0 0 24px rgba(34,211,238,.12);

  transition:
    transform .18s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.magnetic-btn:hover{
  background:#101c2e;

  box-shadow:
    0 0 30px rgba(34,211,238,.22);
}

const button =
  document.querySelector(
    '[data-magnetic-button]'
  );

if (button) {

  button.addEventListener(
    'mousemove',
    function(event) {

      const rect =
        button.getBoundingClientRect();

      const x =
        event.clientX -
        rect.left -
        rect.width / 2;

      const y =
        event.clientY -
        rect.top -
        rect.height / 2;

      button.style.transform =
        'translate(' +
        x * 0.18 +
        'px, ' +
        y * 0.18 +
        'px)';
    }
  );

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

      button.style.transform =
        'translate(0, 0)';
    }
  );

}

How This Magnetic Cursor Works

Unlike other cursor effects on this site that create a separate element to track the mouse, this magnetic cursor effect moves the actual button itself toward the pointer, creating the illusion that the button is being pulled by a magnetic force. The HTML is simple — just a single button (magnetic-btn) inside a container.

The JavaScript listens for mousemove events on the button and calculates two values: how far the cursor is from the button’s horizontal center (x) and vertical center (y), using getBoundingClientRect() to find the button’s exact position and dimensions. These offsets are then multiplied by 0.18 and applied to the button through a CSS transform: translate(). This multiplier is the key to the whole effect — instead of moving the full distance to match the cursor exactly, the button only shifts by 18% of that distance, creating a subtle, restrained “pull” rather than the button snapping directly under the pointer.

When the cursor leaves the button entirely, a mouseout listener resets the transform back to translate(0, 0), and because this reset is paired with a CSS transition on the transform property, the button smoothly glides back to its original position rather than jumping there instantly.

Customizing This Magnetic Cursor

This effect has one key value that controls its entire feel, plus several standard styling options:

• Adjust the magnetic pull strength — the 0.18 multiplier in the JavaScript determines how strongly the button follows the cursor. Increasing it (e.g., to 0.3) makes the pull more dramatic; decreasing it (e.g., to 0.1) makes it more subtle.
• Change the return animation speed — the .18s duration on the transform transition in .magnetic-btn controls how quickly the button snaps back after the cursor leaves.
• Update the button’s colors — the background, border, and box-shadow values in .magnetic-btn can be adjusted to match your site’s theme.
• Change the glow intensity — the box-shadow on hover (currently a soft cyan glow) can be made stronger or removed entirely for a flatter look.

Where to Use This Magnetic Cursor

This effect is specifically designed for buttons and clickable elements, making it ideal for:

• Call-to-action buttons, where the magnetic pull draws extra attention and makes the button feel more responsive and premium.
• Navigation items or icon buttons, adding a layer of polish to otherwise standard interface elements.
• Modern SaaS or agency landing pages, where subtle micro-interactions like this reinforce a well-crafted, high-quality feel.

Since this effect works by physically moving the element, it’s not suited for text-heavy links or inline content — it’s built specifically for standalone, clickable components like buttons.

Since this effect works by physically moving the element, it’s not suited for text-heavy links or inline content — it’s built specifically for standalone, clickable components like buttons. If you need a similar effect for links instead of buttons, our Cursor Ring Hover Effect offers a comparable hover-based interaction.

Frequently Asked Questions

Why does the button move less than the actual distance the cursor moves?
This is intentional and is what creates the “magnetic” feel rather than the button rigidly snapping to the cursor position. The 0.18 multiplier scales down the movement so the button appears to be gently drawn toward the pointer rather than tracking it exactly.

Does this effect work well with buttons of different sizes?
Yes. Since the offset calculation is based on the button’s own getBoundingClientRect() values rather than fixed pixel numbers, the effect automatically adapts to whichever button dimensions you use, without needing to adjust the JavaScript.

Is this effect disabled on mobile devices?
The movement itself is automatically disabled through a mobile media query that resets the transform property, since touch devices don’t have a hovering mouse pointer to trigger the mousemove calculations in the first place. The button still works normally as a clickable element on mobile — it simply won’t move.