Liquid Buttons

Buttons with a flowing liquid fill that sweeps across the surface on hover. A playful accent for landing pages and creative product sites today.

import { Button } from '@/components/ui/button';

export default function LiquidButtons() {
  return (
    <div className="flex flex-wrap justify-center gap-4 p-6">
      <Button
        variant="default"
        className="rounded-[60%_40%_40%_60%/60%_30%_70%_40%] transition-all duration-500 hover:rounded-[40%_60%_70%_30%/50%_60%_30%_60%]"
      >
        Default
      </Button>

      <Button
        variant="secondary"
        className="rounded-[60%_40%_40%_60%/60%_30%_70%_40%] transition-all duration-500 hover:rounded-[40%_60%_70%_30%/50%_60%_30%_60%]"
      >
        Secondary
      </Button>

      <Button
        variant="destructive"
        className="rounded-[60%_40%_40%_60%/60%_30%_70%_40%] transition-all duration-500 hover:rounded-[40%_60%_70%_30%/50%_60%_30%_60%]"
      >
        Destructive
      </Button>

      <Button
        variant="outline"
        className="rounded-[60%_40%_40%_60%/60%_30%_70%_40%] transition-all duration-500 hover:rounded-[40%_60%_70%_30%/50%_60%_30%_60%]"
      >
        Outline
      </Button>

      <Button
        variant="ghost"
        className="rounded-[60%_40%_40%_60%/60%_30%_70%_40%] transition-all duration-500 hover:rounded-[40%_60%_70%_30%/50%_60%_30%_60%]"
      >
        Ghost
      </Button>
    </div>
  );
}

About this block

Liquid Buttons shows five button variants arranged in a single centered, wrapping row. Each button starts with an organic, blob-like border radius and smoothly morphs to a different uneven shape on hover, giving the surface a flowing, liquid quality without any fill change or color swap. The five variants are Default, Secondary, Destructive, Outline, and Ghost, so every role in a standard action hierarchy is covered in one block.

All five variants are independent. You can drop in as few or as many as your page needs, relabel any button to match your copy, and reorder them freely. The morph animation runs on a smooth transition, so it reads as intentional on any background without feeling jarring.

When to use

Reach for this block on an ecommerce storefront where the brand has a playful, organic character and wants buttons that feel distinct from the flat rectangles on competing sites. It works well on product landing pages, campaign microsites, and checkout flows where a small dose of motion signals that the interface is crafted and alive. Compared to Grow Buttons, which scale the whole button outward, Liquid Buttons keeps the footprint constant and lets the shape itself carry the motion, so it reads as more expressive than physically assertive.

A natural flow around it on a Components page:

Before

Badges to label a promotion or new arrival before presenting the action

After

Cards where the same button style sits inside product or feature cards to keep motion consistent
Interactive Buttons for flows that need a stronger state change on click, beyond the shape morph

What you can customize

The block covers every standard button role out of the box, so the main decisions are which variants to include and where to place them:

Variant selection. Keep only the variants that match your page's action hierarchy: a storefront checkout page might need Default and Outline only, while a product card row might use Ghost for secondary links.
Button labels. Replace the demo labels with your real call to action copy so the morph effect appears on the exact text your visitors will read.
Layout context. The wrapping row works well inside a centered hero or feature section; wrap the buttons in a tighter container to keep them close together when screen space is generous.

Tip: pair Liquid Buttons with a clean, minimal surrounding layout so the shape animation has negative space to breathe and does not compete with busy background imagery.

About this block

When to use

A natural flow around it on a Components page:

Before

Badges to label a promotion or new arrival before presenting the action

After

Cards where the same button style sits inside product or feature cards to keep motion consistent
Interactive Buttons for flows that need a stronger state change on click, beyond the shape morph

What you can customize

The block covers every standard button role out of the box, so the main decisions are which variants to include and where to place them:

Variant selection. Keep only the variants that match your page's action hierarchy: a storefront checkout page might need Default and Outline only, while a product card row might use Ghost for secondary links.
Button labels. Replace the demo labels with your real call to action copy so the morph effect appears on the exact text your visitors will read.
Layout context. The wrapping row works well inside a centered hero or feature section; wrap the buttons in a tighter container to keep them close together when screen space is generous.

Tip: pair Liquid Buttons with a clean, minimal surrounding layout so the shape animation has negative space to breathe and does not compete with busy background imagery.

Liquid Buttons

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize