Magnetic CTA

A call-to-action button that attracts the cursor, lifts on hover, and presses on click. Three primitives composed into one premium interaction.

Preview

Complete code

<motion-magnetic strength="0.4">
  <motion-hover scale="1.06" y="-3">
    <motion-press scale="0.96">
      <button>Get started</button>
    </motion-press>
  </motion-hover>
</motion-magnetic>

How it works

Each component handles one layer of the interaction. They compose without conflicting because each animates its own transform.

Magnetic pull

<motion-magnetic strength="0.4">
  <!-- content drifts toward the cursor -->
</motion-magnetic>

strength controls how far the content follows the cursor. At 0.4 the button shifts 40% of the cursor offset. Lower values feel subtle; higher values feel playful.

Hover lift

<motion-hover scale="1.06" y="-3">
  <!-- springs up on mouse enter -->
</motion-hover>

The hover lift gives visual confirmation that the element is interactive. The spring makes the transition feel physical rather than mechanical.

Press feedback

<motion-press scale="0.96">
  <!-- compresses on pointerdown -->
</motion-press>

The press scale provides tactile feedback. The button compresses when clicked and springs back on release.

Tuning

Adjust each layer independently. The magnetic strength, hover scale, and press depth are all separate knobs.

Subtle version

<motion-magnetic strength="0.2">
  <motion-hover scale="1.03" y="-1">
    <motion-press scale="0.98">
      <button>Subscribe</button>
    </motion-press>
  </motion-hover>
</motion-magnetic>

Playful version

<motion-magnetic strength="0.6">
  <motion-hover scale="1.08" y="-4" rotate="-1">
    <motion-press scale="0.94">
      <button>Let's go</button>
    </motion-press>
  </motion-hover>
</motion-magnetic>

Accessibility

All three components respect prefers-reduced-motion. Users who request reduced motion get the button at rest with no magnetic pull, hover transform, or press feedback.