Liquid Button

<script setup lang="ts">
import LiquidButton from '@/components/animate-ui/buttons/liquid/LiquidButton.vue'

withDefaults(
  defineProps<{ delay?: number | string, fillHeight?: number | string, tapScale?: number | string }>(),
  { delay: 0.3, fillHeight: 3, tapScale: 0.97 },
)
</script>

<template>
  <LiquidButton :delay="`${delay}s`" :fill-height="`${fillHeight}px`" :tap-scale="Number(tapScale)">
    Liquid Button
  </LiquidButton>
</template>

InstallationCopy Anchor Link

npx shadcn-vue@latest add https://animate-ui.com/r/vue/buttons-liquid.json

pnpm dlx shadcn-vue@latest add https://animate-ui.com/r/vue/buttons-liquid.json

yarn dlx shadcn-vue@latest add https://animate-ui.com/r/vue/buttons-liquid.json

bun x shadcn-vue@latest add https://animate-ui.com/r/vue/buttons-liquid.json

UsageCopy Anchor Link

<script setup lang="ts">
import LiquidButton from '@/components/animate-ui/buttons/liquid/LiquidButton.vue';
</script>

<template>
  <LiquidButton>Get started</LiquidButton>
</template>

AnimationCopy Anchor Link

• On hover, a fillHeight line of --liquid-button-color slides in along the bottom, then rises to fill the button, each step taking delay (a CSS transition). Leaving, the fill variables ease back over 0.3s, then the text color and the liquid drain in reverse.
• Pressing scales the button to tap-scale (0.97), and releasing springs it back (Animate UI's press spring, stiffness: 550, damping: 30). Hovering fills it without scaling it, unless you set hover-scale (then a 0.3s ease-out).
• transition replaces the press, release and leave transitions.
• <AnimateUIProvider :tempo> paces the Motion transitions (not the CSS delay).
• Under reduced motion, the button fills without scaling when pressed.

API ReferenceCopy Anchor Link

LiquidButtonCopy Anchor Link

CSS variablesCopy Anchor Link