shimmer-button

shimmer-button

A highlight that sweeps across a CTA. Part of motion-anything; obeys MOTION-SPEC.md. Technique popularized by Magic UI, reimplemented dependency-free (pure CSS).

When to use it

• One primary call-to-action you want to feel premium ("Get started" / "Upgrade").

When NOT to use it (restraint)

• Secondary / destructive buttons; many buttons at once (the sweep becomes noise). One per view.

How to apply

1. Copy shimmer-button.css into the project and link it.
2. Mark the button:

   <button class="shimmer">Get started</button>
   

3. Tune the sweep duration (default 2.6s at rest, 1.1s on hover) and the button colors as needed.

Accessibility & performance

• Under prefers-reduced-motion the sweep stops; a plain solid button remains.
• Animates the transform of a masked pseudo-element only — GPU-safe.

Framework notes

• Pure CSS; works in any framework.