Swipe Button

Clean and satisfying. Hover and watch a color wave sweep across the button from left to right, revealing a contrasting background underneath. It's that classic "fill" effect done right—smooth, crisp edges, perfect timing. Works great for primary CTAs where you want clear hover feedback without being flashy. The swipe direction is reversible too. Simple effect, maximum impact.

Swipe Button preview

Installation

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

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

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

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

Related Components

FAQ