# Animated Button > Build a spring-based animated button with Svelte Motion featuring press feedback, hover lift, and smooth transitions for interactive UIs. **Source:** [https://motion.svelte.page/examples/animated-button](https://motion.svelte.page/examples/animated-button) **Markdown mirror:** [https://motion.svelte.page/examples/animated-button.md](https://motion.svelte.page/examples/animated-button.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: mount + animate. The simplest motion lesson: declare `initial`, `animate`, and a `transition`. Motion tweens between them as the element enters. Replay to remount. **Metadata:** tag: `ANIMATE` | pattern: `mount tween` ### Notes - `initial` sets the values on mount; `animate` is the target. Motion tweens between them when the component enters the DOM — no manual lifecycle wiring required. - `transition` controls the duration, easing, and type. Here it's a 600ms linear tween — swap in `type: 'spring'` for physics-based motion, or set `duration: 0` to skip the tween entirely. - The Replay button bumps a key on a `{#key}` block — Svelte tears the button down and re-mounts it, so motion runs the entrance tween again. Same trick works for any single-shot animation. ### Source #### Default.svelte Source file: [src/lib/examples/animated-button/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/animated-button/demos/Default.svelte) ```svelte

// animated button replay {String(replayId).padStart(2, '0')}

{#key replayId} ({ fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.8125rem', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', border: '1px solid var(--brut-ink, #0a0a0a)', backgroundColor: 'var(--brut-bg-2, #eef4f1)', color: 'var(--brut-ink, #0a0a0a)', padding: '0.75rem 1.5rem', boxShadow: '6px 6px 0 var(--brut-rule, #d6dedb)', cursor: 'pointer' }))} > Animated button {/key}

(replayId += 1)} whileHover={{ scale: 1.04 }} whileTap={{ scale: 0.96 }} transition={{ type: 'spring', stiffness: 500, damping: 30 }} style={styleString(() => ({ fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.6875rem', textTransform: 'uppercase', letterSpacing: '0.08em', border: '1px solid var(--brut-accent, #247768)', backgroundColor: 'var(--brut-accent-soft, rgba(36, 119, 104, 0.1))', color: 'var(--brut-accent, #247768)', padding: '0.5rem 0.875rem', cursor: 'pointer' }))} > ↻ replay fade: 0 → 1 / 600ms

```