Button & Link Animation Style Guide
A visual reference for all button and link variants, plus the animation techniques you can layer on top. Each section is interactive — hover or click to see the animations in action.
Button Variants & Hover Animations
All four button variants in large, medium, small, with-icon, and disabled states. Use the toggle to switch between animation styles: no animation, hover underline, or slide-up on hover.
Pick an Animation:
Large
Medium
Small
With icon (medium)
Icon left (medium)
Disabled (medium)
Framer Motion: Confetti & Content Swap
Particle bursts and animated content swaps powered by framer-motion.
Click to trigger.
Click the buttons to trigger confetti particles or a content swap animation — all driven by framer-motion.