---
title: Liquid Button
description: A clickable button featuring a dynamic, fluid-like animation effect upon hover, creating an engaging, liquid-inspired interaction.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="liquid-button-demo" />

## Installation

<ComponentInstallation name="liquid-button" />

## Usage

```tsx
<LiquidButton>Button</LiquidButton>
```

## Props

<TypeTable
  type={{
    children: {
      description: 'The children of the component',
      type: 'React.ReactNode',
      required: false,
    },
    className: {
      description: 'The className of the component',
      type: 'string',
      required: false,
    },
  }}
/>

## Credits

- Credits to [Emadamerho Nefe](https://codepen.io/nefejames/pen/yyBedGg) for the inspiration