---
name: nexu-io/shimmer-button
source: https://app.decimal.ai/s/nexu-io-shimmer-button@1/SKILL.md
source_sha256: 720f1d92df86
---

# shimmer-button

A highlight that sweeps across a CTA. Part of
[motion-anything](https://github.com/nexu-io/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:
   ```html
   <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.