Liquid Button

Minimal liquid button with a curved dark fill that rises on hover, focus, and press.

Add to your project

1Connect the Uniquel MCP

Connect Uniquel to your coding agent before using the component ID.

Connect MCP

2Copy the component ID

MCP ID
component:conversion/liquid-button

Works with your AI tools

ClaudeClaude*
CodexCodex*
LovableLovable
Base44Base44
Figma MakeFigma Make
ReplitReplit*
CursorCursor*
v0v0

* Compatible with most projects that use the default React/Next.js framework.

Built With

ReactTailwind CSS

Props

PropTypeDescription
childrenReactNodeButton label or content
classNamestringStyles for the button
...propsButtonHTMLAttributesNative button attributes

More Conversion Components

Translucent offer marker with a low-frequency glow pulse and optional dismiss.

Primary and secondary actions as one unit — depth on hover, underline reveal on the quiet CTA.