# Magnetic CTA

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

Source: https://www.motion-components.dev/docs/recipes/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.

## Complete code

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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.