Outline Fill Button

Button that fills from outline to solid with rising animation on hover for React.

Outline Fill Button preview

Scroll to load preview

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.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:

use shadcnio to install the outline-fill-button button into my project

Liquid Button

Fluid fill animation

Shine Button

Diagonal light sweep

Shimmer Button

Flowing shimmer effect

Morph Button

Shape morphing

Spotlight Button

Cursor-following light

Ripple Button

Material Design ripple

Outline Fill Button