Shimmer Button
CTA button with a continuous light sweep.
- 0.6 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/shimmer-button.jsonAdds components/velora/shimmer-button.tsx and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
Also accepts every <button> attribute, forwarded to the root element.
Accessibility
- Reduced motion
- The sweep is off; a faint static sheen rests on the right side of the button. The hover scale still applies.
- Keyboard
- Native <button>: reachable with Tab, activated with Enter or Space, and focus-visible shows a 2px outline in the ring colour.
- Screen readers
- Named by its children; the shimmer overlay is aria-hidden.