---
title: "StaggeredButton — Free Framer component · Best of Framer"
description: "Free Framer component · by Aathif Thajudeen · Buttons. This stagger-hover button adds a smooth, letter-by-letter slide animation that activates when the user hovers over the button."
canonical: "https://framer.elliotli.dev/component/staggeredbutton"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/StaggeredButton

# StaggeredButton

[View on Framer](https://framer.com/marketplace/components/staggeredbutton/?via=elliot-li)

![StaggeredButton preview image 1](https://framer.elliotli.dev/og/component/staggeredbutton/d6cd2e7879d33adc/1600x1200.jpg)

## Summary

This stagger-hover button adds a smooth, letter-by-letter slide animation that activates when the user hovers over the button.

## Description

**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
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-u66llv6f-acTJV7m7M9h4SXZXMAxMcadbkv1hGv)

## Rank history [How rankings work →](/terms#rankings)

-   All · #3158

## Details

- **Author**: Aathif Thajudeen
- **Published**: 2025-12-11
- **Updated**: 2025-12-10
- **Added**: 2025-12-03
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything