Liquid Button
A free button with a curved fill that rises on interaction.
Fen Row Market Garden
Autumn shares open on Monday. Forty boxes, collected on Thursdays from the yard gate or the Bell in Marsham, first week of October through to the middle of March.
Liquid Button is a free button component for Next.js, React and Tailwind that fills a real CTA link from the bottom when it is hovered or receives keyboard focus. It provides a liquid fill button css react pattern without JavaScript or animated colours.
An opaque, curved layer moves with one transform while an aria-hidden visual label counter-moves by the exact opposite distance; the semantic label remains the sole accessible name, the two labels stay registered throughout the transition, and reduced-motion users receive the same filled state instantly.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/btn-liquidUsage
import { LiquidButton } from "@/components/ui/btn-liquid";
export default function Page() {
return (
<LiquidButton
label="Take an autumn share"
href="/components"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | required | Button text rendered as the anchor's sole accessible label. |
| href | string | required | Destination passed to the real anchor element. |
| className | string | undefined | Additional classes merged onto the anchor. |
Customisation
Liquid Button exposes one Tier 3 CSS custom property. Set --btn-liquid-fill to a semantic colour that keeps at least AA contrast against --background, which colours the visual label. The default var(--foreground) preserves the standard foreground and background contrast pair.
.liquid-cta {
--btn-liquid-fill: var(--foreground);
}Frequently asked questions
- Is Liquid Button free for commercial use?
- Yes. Liquid Button is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Liquid Button accessible and performant?
- Yes. It renders a real anchor whose semantic label supplies the accessible name, adds a distinct focus outline, and keeps decorative copies hidden from assistive technology and pointer input. Only two transforms animate, layout stays fixed, and reduced motion makes the state change instant.
- How do I change the liquid fill colour?
- Override --btn-liquid-fill with a semantic colour token on :root or any ancestor. Choose a colour with at least 4.5:1 contrast against --background so the visual label remains AA in the filled state.