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.

Liquid Button

A free button with a curved fill that rises on interaction.

Automated axe check
Reduced-motion tested
SSR build verified
CSS and React
No runtime packages

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.

Interaction preview

Hover or focus the link to raise a curved liquid fill while its visible label stays perfectly registered.

Explore free components

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-liquid

Usage

import { LiquidButton } from "@/components/ui/btn-liquid";

export default function Page() {
  return (
    <LiquidButton
      label="Explore free components"
      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.

Related components

Want the full page this belongs to?Template Empire builds complete Next.js templates with this motion system throughout. Browse the paid templates that pair with these free components.Explore Template Empire templates