Outline Fill Button

Start minimal, end bold. This button lives as a clean outline until you hover—then color rises from the bottom like water filling a glass. The text inverts as the fill passes through, creating a satisfying visual flip. It's that perfect balance of subtle and impactful. Great for secondary actions that should feel clickable without competing with your primary CTA. The fill direction is customizable—rise from bottom, drop from top, or sweep from either side.

Outline Fill Button preview

Installation

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

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

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

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

Related Components

FAQ