Liquid Button

liquid x blob

Button with liquid morphing hover effect. From Animate UI.

buttonliquidblobanimateui

Code

button-liquid.tsx

export function LiquidButton({ children }: { children: React.ReactNode }) {
  return (
    <button className="rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500 px-8 py-3 text-sm font-medium text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-violet-500/40 active:scale-95">
      {children}
    </button>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Liquid Button component and wire it to my accent.”