FreeHover

Magnetic Button

A button that pulls toward the cursor and floods with colour from where you enter.

Loading
Usage 
import { MagneticButton } from "./MagneticButton";

<MagneticButton href="/contact">
  Start a project
</MagneticButton>

About

The pointer pulls the button in from beyond its edge, with the label travelling further than the body so it reads as depth. On hover a fill floods in from the exact point the pointer entered and drains out toward the point it left, and the label's colour crosses over with it. Springs run on requestAnimationFrame and stop when settled, so it costs nothing at rest. Renders an <a> with an href, a <button> without.

What you get

  • Rebuild prompt

    One paste into Claude Code, Cursor, Codex or v0 rebuilds it byte for byte.

  • Source

    MagneticButton.tsx + MagneticButton.css — plain React and CSS, every comment kept.

  • Vite project

    A ready-to-run project with this exact example and pinned versions — unzip, install, run.

More like this

All components
◎HoverNewPro
Open live demo →

Dot Field

Backgrounds

A living field of dots that parts around the cursor and breathes.

◎HoverNewPro
Open live demo →

Tilt Card

Cards

A card that tilts in real 3D, with glare and layers that float apart.

↕ScrollNewPro
Open live demo →

Aperture Zoom

Scroll

A framed image that opens to full-bleed as you scroll, parting the headline.