5c:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2qsfz_74auu2_.js","/creators-assets/_next/static/immutable/chunks/1xkjm3oyldl_r.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3yfgkb3cck8zt.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/3kyaj4hrugjs0.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2ryuxt_mk774w.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/0e-wwv74y78f7.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js"],"PostDetailCard"] 5d:T887,

Here's a polished, detailed marketplace description:

Animated Gradient Pill Button — Framer Component

Give your website a CTA that actually grabs attention. This pill-shaped button component features a smooth, continuously rotating gradient border animation that adds a subtle but premium sense of motion to your call-to-action — without feeling distracting or overdone.

What makes it special:

The rotating border effect creates a glowing, animated outline that loops seamlessly around the button, instantly making your CTA feel more dynamic and modern compared to a static button. It's the kind of small detail that makes a website feel polished and intentional.

Fully customizable:

Every color is yours to control. Adjust the background color, the gradient colors used in the rotating border, and instantly create a button that matches your brand palette. Whether you're building a SaaS landing page, a portfolio, an agency site, or an ecommerce store — just swap the colors and the button adapts to fit your design system in seconds.

Built-in interactions:

This isn't just a static design — it comes with thoughtful micro-interactions baked in. On hover, the button responds with a smooth, satisfying transition that gives users visual feedback before they even click. On press, a tactile pressed-down effect makes the interaction feel real and responsive, adding to the overall premium feel of your site.

Why you'll love using it:

No need to build animated buttons from scratch or wrestle with custom code. Drop this component into your Framer project, plug in your brand colors, and you have a CTA button that looks like it was custom-built by a design team — ready to drive clicks, sign-ups, and conversions.

Perfect for: Landing pages, hero sections, pricing pages, newsletter sign-ups, product launches, and anywhere you need a CTA button that stands out and feels alive.

Lightweight, easy to customize, and built to make your website feel more premium in seconds.

59:[["$","$L5c",null,{"post":{"id":"019edcc3-2370-73d9-b93e-f74af889d6bf","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"55210991-209c-40a4-b3e3-ed0b38410caa","name":"Min Jin","slug":"minjin","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/55210991-209c-40a4-b3e3-ed0b38410caa/h4tg8okk","followed":false,"followsYou":false},"media":[],"resources":[{"id":"aboTYBf8rLGoShnFEtQy","resolved":true,"title":"Pill Button","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Here's a polished, detailed marketplace description:"}]},{"type":"paragraph","content":[{"type":"text","text":"Animated Gradient Pill Button — Framer Component","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Give your website a CTA that actually grabs attention. This pill-shaped button component features a smooth, continuously rotating gradient border animation that adds a subtle but premium sense of motion to your call-to-action — without feeling distracting or overdone."}]},{"type":"paragraph","content":[{"type":"text","text":"What makes it special:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"The rotating border effect creates a glowing, animated outline that loops seamlessly around the button, instantly making your CTA feel more dynamic and modern compared to a static button. It's the kind of small detail that makes a website feel polished and intentional."}]},{"type":"paragraph","content":[{"type":"text","text":"Fully customizable:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Every color is yours to control. Adjust the background color, the gradient colors used in the rotating border, and instantly create a button that matches your brand palette. Whether you're building a SaaS landing page, a portfolio, an agency site, or an ecommerce store — just swap the colors and the button adapts to fit your design system in seconds."}]},{"type":"paragraph","content":[{"type":"text","text":"Built-in interactions:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"This isn't just a static design — it comes with thoughtful micro-interactions baked in. On hover, the button responds with a smooth, satisfying transition that gives users visual feedback before they even click. On press, a tactile pressed-down effect makes the interaction feel real and responsive, adding to the overall premium feel of your site."}]},{"type":"paragraph","content":[{"type":"text","text":"Why you'll love using it:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"No need to build animated buttons from scratch or wrestle with custom code. Drop this component into your Framer project, plug in your brand colors, and you have a CTA button that looks like it was custom-built by a design team — ready to drive clicks, sign-ups, and conversions."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for:","marks":[{"type":"bold"}]},{"type":"text","text":" Landing pages, hero sections, pricing pages, newsletter sign-ups, product launches, and anywhere you need a CTA button that stands out and feels alive."}]},{"type":"paragraph","content":[{"type":"text","text":"Lightweight, easy to customize, and built to make your website feel more premium in seconds."}]}]},"introduction":"Interactive colored pill button","slug":"pill-button","author":{"framerUserId":"55210991-209c-40a4-b3e3-ed0b38410caa","name":"Min Jin","slug":"minjin","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/55210991-209c-40a4-b3e3-ed0b38410caa/h4tg8okk","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/55210991-209c-40a4-b3e3-ed0b38410caa/bnytfmjm","metadata":{"tint":{"h":0,"s":0,"l":33},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-18T22:03:56.628Z","updatedAt":"2026-06-18T22:03:56.628Z","publishedAt":"2026-06-18T22:03:56.623Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Colored-CTA-Button-xvf1vR.js@GTY4m9KiZaFm42ZEokPI","previewUrl":"https://ctabuttonanimated.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"GTY4m9KiZaFm42ZEokPI","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-18T22:03:56.656Z","updatedAt":"2026-06-18T22:03:56.656Z","reported":false}}],"$L5e"]

Suggested for you