5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/05lj3a0qaa006.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/382a8k30zyobj.js","/creators-assets/_next/static/immutable/chunks/368p63l4oh_7-.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/228u8o-g1d1_g.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/413kuej600yyw.js","/creators-assets/_next/static/immutable/chunks/02hyzon6wywme.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T88b,

About this Component

StaggerButton is a highly polished call-to-action button that brings refined motion to your Framer projects. On hover, the label animates one character at a time — each letter slides up and is instantly replaced by a duplicate rising from below, creating a crisp, cascading text-reveal effect. At the same time, the arrow icon gives a subtle nudge and the background eases into your hover color, all happening in one fluid, satisfying interaction.

Built as a native Framer code component with zero external dependencies, it supports Framer's built-in page transitions out of the box. Pick any page from the Link To field and the button navigates with your project's transition animation, no extra configuration needed. External URLs, mailto, and tel links are supported too.

The component is fully resizable on the canvas and adapts to any layout. Drop it in, resize to fit, and control everything from the properties panel.

Customizable Properties

Label: Edit the button text
Font: Full font control including family, size, weight, style, and letter spacing
Background: Set the default button background color
Background Hover: Set the color the button eases into on hover
Text Color: Set the label color
Icon Background: Set the color of the arrow box
Icon Color: Set the arrow color
Padding: Independent top, bottom, left, and right spacing
Gap: Control the space between the label and the arrow box
Radius: Control button corner roundness
Icon Size: Set the size of the arrow box
Link To: Native Framer link picker supporting internal pages, external URLs, mailto, and tel

5a:[["$","$L5d",null,{"post":{"id":"019eda3a-2064-7acb-b7e5-f074b0506246","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"b7bb6bf2-e9ae-4caf-b65c-483f782d34c4","name":"Calvin Lai","slug":"calvinlai","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b7bb6bf2-e9ae-4caf-b65c-483f782d34c4/15e1gfra","followed":false,"followsYou":false},"media":[],"resources":[{"id":"qX0WHNkRv9uQJHCtxZVH","resolved":true,"title":"StaggerButton","body":"$5e","bodyJson":null,"introduction":"Animated CTA button with text reveal","slug":"staggerbutton","author":{"framerUserId":"b7bb6bf2-e9ae-4caf-b65c-483f782d34c4","name":"Calvin Lai","slug":"calvinlai","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b7bb6bf2-e9ae-4caf-b65c-483f782d34c4/15e1gfra","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/qX0WHNkRv9uQJHCtxZVH/staggerbutton-3q5DXbJmjgUHUdX1lMMuKWNiXhuq86","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-28T18:09:56.221Z","updatedAt":"2026-06-05T16:29:32.802Z","publishedAt":"2026-06-18T10:15:03.012Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/StaggerButton-TJUnP8.js@KGQQrUiWHeUAXeUPr4pi","previewUrl":"https://functional-work-660255.framer.app/button","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"KGQQrUiWHeUAXeUPr4pi","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-18T10:15:03.012Z","updatedAt":"2026-06-18T10:15:03.012Z","reported":false}}],"$L5f"]

Suggested for you