Ring Expand Button

Hover and send out a signal. Concentric rings expand outward from the button like sonar pulses or ripples in water—but in reverse, they start tight and bloom outward. It's hypnotic without being distracting, technical without being cold. The rings fade as they expand, creating depth and motion that draws the eye inward to your CTA. Perfect for "broadcast" actions like sharing, notifications, or anything that sends something out into the world. Also killer for tech products and dashboards.

Ring Expand Button preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/ring-expand-button.json

npx shadcn@latest add https://www.shadcn.io/registry/ring-expand-button.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/ring-expand-button.json

bunx shadcn@latest add https://www.shadcn.io/registry/ring-expand-button.json

Related Components

FAQ