5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5e:I[539959,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"CommentSection"] 5d:T6a3,

About this Component

ButtonColorChange is a highly polished call-to-action button that brings motion and personality to your Framer projects. On hover, an accent-colored circle bursts from the left edge and floods the entire button in a smooth, springy fill. The label shifts to the right, swaps color, and the arrow box animates out while a second arrow enters from the left, all happening in one fluid, satisfying interaction.Built as a native Framer code component, 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.

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
Accent: Set the hover fill color, also controls the arrow box and text color swap
Radius: Control button corner roundness
Link To: Native Framer link picker supporting internal pages, external URLs, mailto.

59:[["$","$L5c",null,{"post":{"id":"019df249-5bc4-7c5c-9776-d4e50a8dd287","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":"GYkLWNcg7BUM34EHXq3I","resolved":true,"title":"FillShift Button","body":"$5d","bodyJson":null,"introduction":"Expanding fill button with a move arrow","slug":"fillshift-button","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/GYkLWNcg7BUM34EHXq3I/fillshift-button-g735piy9vMHBv35BYnTjUgiDjpu583","metadata":{"tint":"hsl(0 0% 9%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-05-03T12:57:23.872Z","updatedAt":"2026-06-04T18:00:24.022Z","publishedAt":"2026-05-04T09:19:47.140Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/ButtonColorChanging-UECSYT.js@eIlZ0TO8YDddsoDb9WXg","previewUrl":"https://able-thing-590135.framer.app/button","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"eIlZ0TO8YDddsoDb9WXg"}}],"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-05-04T09:19:47.140Z","updatedAt":"2026-05-04T09:19:47.140Z","reported":false}}],["$","$L5e",null,{"target":{"kind":"post","postId":"019df249-5bc4-7c5c-9776-d4e50a8dd287"},"postId":"019df249-5bc4-7c5c-9776-d4e50a8dd287","postAuthor":"$59:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you