5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.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/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.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/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.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:T63a,

What it does

ChromeButton gives your Framer site a cinematic, high-end call-to-action button with a reflective chrome/glass surface and magnetic pointer interaction. It reacts to the cursor with 3D tilt, moving reflections, cursor-tracked highlights, shimmer, ripple feedback, and optional particle sparks, making a simple CTA feel like a premium interactive object.

Features

Includes a polished chrome surface built from layered gradients, reflections, rim highlights, inner glow, glass sheen, surface noise, liquid sweep, shimmer, and specular drift. Magnetic tilt reacts to the pointer using spring-based Framer Motion values. Cursor-tracked highlights move across the button surface as visitors hover. Press interactions create tactile scale depth, optional ripple feedback, and lightweight particle sparks. Theme presets include Chrome, Purple, Emerald, Sapphire, Rose, and Gold, plus a custom color mode. Custom controls include base color, metal color, highlight color, glow colors, metal intensity, reflection intensity, motion strength, outer glow, glow intensity, radius, font, text color, text size mode, fixed or frame-fill sizing, and custom width/height. Optional icons include arrow, sparkle, bolt, and play, with left or right positioning. Loading state replaces the icon with a spinner and loading label. Disabled state reduces opacity and blocks interaction. The component can render as a button or as a link with optional new-tab behavior. Motion is disabled in Framer’s static renderer and respects reduced-motion preferences.

5f:T494,Includes a polished chrome surface built from layered gradients, reflections, rim highlights, inner glow, glass sheen, surface noise, liquid sweep, shimmer, and specular drift. Magnetic tilt reacts to the pointer using spring-based Framer Motion values. Cursor-tracked highlights move across the button surface as visitors hover. Press interactions create tactile scale depth, optional ripple feedback, and lightweight particle sparks. Theme presets include Chrome, Purple, Emerald, Sapphire, Rose, and Gold, plus a custom color mode. Custom controls include base color, metal color, highlight color, glow colors, metal intensity, reflection intensity, motion strength, outer glow, glow intensity, radius, font, text color, text size mode, fixed or frame-fill sizing, and custom width/height. Optional icons include arrow, sparkle, bolt, and play, with left or right positioning. Loading state replaces the icon with a spinner and loading label. Disabled state reduces opacity and blocks interaction. The component can render as a button or as a link with optional new-tab behavior. Motion is disabled in Framer’s static renderer and respects reduced-motion preferences.5a:[["$","$L5d",null,{"post":{"id":"019ed5cb-e0c0-731f-857a-9390591a9ed8","title":null,"body":"

Check out this button!!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Check out this button!!"}]}]},"author":{"framerUserId":"2aa1c8b3-7537-46a8-a900-110c4e9d5ea9","name":"Spyridon Merkouris","slug":"spyridon-merkouris","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2109501/avatar-cFtiy7MwEgg752DMyUE5kNTlTumFuR.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"CmMFPnmM2H56rgwaxf4d","resolved":true,"title":"ChromeButton","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"What it does"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"ChromeButton","marks":[{"type":"bold"}]},{"type":"text","text":" gives your Framer site a cinematic, high-end call-to-action button with a reflective chrome/glass surface and magnetic pointer interaction. It reacts to the cursor with 3D tilt, moving reflections, cursor-tracked highlights, shimmer, ripple feedback, and optional particle sparks, making a simple CTA feel like a premium interactive object."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"$5f"}]}]},"introduction":"Chrome magnetic CTA button","slug":"chromebutton","author":{"framerUserId":"2aa1c8b3-7537-46a8-a900-110c4e9d5ea9","name":"Spyridon Merkouris","slug":"spyridon-merkouris","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2109501/avatar-cFtiy7MwEgg752DMyUE5kNTlTumFuR.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2aa1c8b3-7537-46a8-a900-110c4e9d5ea9/4z33y3tz","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-17T13:36:08.699Z","updatedAt":"2026-06-29T19:38:27.814Z","publishedAt":"2026-06-17T13:36:08.676Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Magnetbutton-tC1ZGY.js@9gugaEOBeqzTWxOyniAb","previewUrl":"https://expanded-garlic-351792.framer.app","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"9gugaEOBeqzTWxOyniAb","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-17T13:36:08.896Z","updatedAt":"2026-06-17T13:36:08.896Z","reported":false}}],"$L60"]

Suggested for you