Animated Button

A drop-in replacement for the shadcn-svelte Button powered by svelte-motion. Spring-based press feedback and subtle hover lift come out of the box — no extra config needed.

Installation

Install via the shadcn-svelte CLI from our registry:

npx shadcn-svelte@latest add https://motion.svelte.page/r/animated-button.json

npx shadcn-svelte@latest add https://motion.svelte.page/r/animated-button.json

This installs AnimatedButton alongside your existing Button. It automatically pulls in @humanspeak/svelte-motion and tailwind-variants as dependencies.

Then use it:

<script>
  import { AnimatedButton } from '$lib/components/ui/animated-button'
</script>

<AnimatedButton variant="default">Click me</AnimatedButton>
<AnimatedButton variant="outline" size="icon" aria-label="Like"><i class="fa-solid fa-heart" /></AnimatedButton>
<AnimatedButton animated={false}>No motion</AnimatedButton>

<script>
  import { AnimatedButton } from '$lib/components/ui/animated-button'
</script>

<AnimatedButton variant="default">Click me</AnimatedButton>
<AnimatedButton variant="outline" size="icon" aria-label="Like"><i class="fa-solid fa-heart" /></AnimatedButton>
<AnimatedButton animated={false}>No motion</AnimatedButton>

Manual Installation

Alternatively, copy the component source directly from GitHub.

Live Demo

Try clicking and hovering on each variant:

Animation Details

The animated prop (default true) lets consumers opt out entirely for vanilla shadcn behavior — useful for cases where the animation conflicts with a parent layout.

API

All standard shadcn-svelte Button props are supported, plus: