Liquid Metal Button
A button with an animated liquid metal shader effect.
This button uses bg-primary-foreground so the liquid metal effect blends
naturally with its surroundings—dark on dark in dark mode, light on light in
light mode.
import { LiquidMetalButton } from '@/components/ui/liquid-metal-button';
export function LiquidMetalButtonDefault() {
return <LiquidMetalButton>Click me</LiquidMetalButton>;
}
Installation
Usage
import { LiquidMetalButton } from "@/components/ui/liquid-metal-button"<LiquidMetalButton>Click me</LiquidMetalButton>Examples
Sizes
import { LiquidMetalButton } from '@/components/ui/liquid-metal-button';
export function LiquidMetalButtonSizes() {
return (
<div className='flex flex-wrap items-center gap-4'>
<LiquidMetalButton size='sm'>Small</LiquidMetalButton>
<LiquidMetalButton size='md'>Medium</LiquidMetalButton>
<LiquidMetalButton size='lg'>Large</LiquidMetalButton>
</div>
);
}
Custom Effect
import { LiquidMetalButton } from '@/components/ui/liquid-metal-button';
export function LiquidMetalButtonCustom() {
return (
<LiquidMetalButton
speed={1.2}
repetition={6}
softness={0.8}
shiftRed={0.5}
shiftBlue={0.1}
>
Custom Effect
</LiquidMetalButton>
);
}