>

>

StaggeredButton

StaggeredButton

A smooth stagger-hover button where each letter swaps in with a sliding animation. Fully responsive and customizable for text, timing, easing, and style.

About this Component

This stagger-hover button adds a smooth, letter-by-letter slide animation that activates when the user hovers over the button. Each character animates with a slight delay, creating a clean, modern stagger effect. The button works with any text, adapts across breakpoints, and offers full styling control—perfect for adding subtle motion and premium interaction to any Framer project.

Features
  • Custom text

  • Responsive variants for breakpoints

  • Add a link

  • Adjustable font styles

  • Custom button color

  • Custom text color

  • Border size control

  • Border color control

  • Adjustable padding

  • Border radius customization

  • Animation duration control

  • Stagger delay for letter timing

  • Custom easing options

  • Animation direction: up or down

Create a free website with Framer, the website builder loved by startups, designers and agencies.