Fill Sweep Button

Button whose fill sweeps in from any of four directions on hover while the text inverts.

#button #fill #hover

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

FillSweepButtonProps

Also accepts all props of React.ComponentProps<"button">

Prop	Type	Default	Description
direction	`"left" \| "right" \| "up" \| "down"`	`"left"`	—

Install

$ npx shadcn@latest add https://chromotion.dev/r/fill-sweep-button.json

More like this

Interactive Hover Button

On hover a dot expands to fill the button while the label slides out and an inverted label with an arrow slides in.

Flow Button

Pill button with a circular icon on the right; inverts on hover while the arrow nudges forward.

Shiny Button

A diagonal white streak sweeps across on hover; sweep duration is adjustable.