# Shimmer Button

> Make one primary CTA feel premium: a soft band of light sweeps across it (slowly at rest, faster on hover). Reserve for the single primary button; keep it subtle. Pure CSS; the sweep stops (solid button) under prefers-reduced-motion. Do not use on secondary/destructive buttons or many at once.

- Skill: `xpert-ai/shimmer-button` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add xpert-ai/shimmer-button`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xpert-ai/shimmer-button/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: xpert-ai (https://skillmd.com/u/xpert-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/xpert-ai/shimmer-button

---


# 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.