Liquid Metal Button

A button whose face is a live liquid-metal shader that speeds up on hover and on press.

JJuno GL·byJPJuno ParkPro
Remix
Open full preview ↗

0

Bookmarks

0

Installs

0

Views

10 lines
import { LiquidMetalButton } from "@/components/ui/liquid-metal-button"

export default function DemoLiquidMetalButton() {
  return (
    <div className="flex min-h-[240px] w-full items-center justify-center gap-8 bg-background p-8">
      <LiquidMetalButton label="Get started" />

4 more lines behind a plan

Previews are free to watch. Reading and copying the full source needs a plan.

See plans
Checks
ThemeableReduced motionFocus visible
Dependencies
@paper-design/shaderslucide-react
License
MIT License
Published
9/11/2026
Categories
ButtonsShadersCalls to Action

Similar components

JPMesh Gradient
9.4k
JPPlasma Shader
5.8k
JPWave Lines
3.1k
JPConvergence Field
0
NRShimmer Button
6.2k
SLiquid Glass Button
5.3k

That's all 6 components

Explore more

Part of Juno GL — browse the full library on Nuxus.

Buttons components2kShaders components0Calls to Action components501