Fill button

An outlined pill whose fill sweeps in from the left and out to the right.

Behaviour

Reduced motion: the fill fades in and out instead of sweeping.
The fill sweeps in from the left on hover or keyboard focus and out to the right on leave; the label switches colour with it.
One CSS transition and a data attribute: React never re-renders. Touch and pen get the press colour only.

Prop	Type	Description
href	`string`	Renders an <a> instead of a <button>.
className	`string`	Merged with cn(). The colours come from foreground and background.
...rest	`button / a props`	Everything else goes to the element; your pointer and focus handlers run before the sweep.

npx shadcn@latest add https://purrfectui.com/r/fill-button.json

import { FillButton } from "@/components/ui/fill-button";

<FillButton>Get in touch</FillButton>
<FillButton href="/work">View work</FillButton>

Loading…

MIT. Copy it into your project and change it as you like.