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:T73a,

Metal Rim Button is a glossy pill CTA for Framer, wrapped in a thin rim of moving liquid chrome. The metal stays mostly black, with soft flashes of orange, red, purple and blue drifting through it. On hover the icon launches up and out while a fresh one slides in from below, and a light glint sweeps across the face. It is built entirely from native Framer layers and a Liquid Gradient shader, so there is no code to manage and every detail stays editable on the canvas.

How to Use

1. Drop Metal Rim Button onto any page and pick a Variant: Default, Large, Dark or Large Dark. Light versions use a bright glossy face, dark versions a deep graphite face.

2. Set the button text with Title, and point it to any page, section or external URL with Link.

3. Choose any Lucide icon with Icon, or switch off Show Icon for a clean text-only pill.

4. Preview the page and hover to see the launch, glint and shadow lift. Click and hold to see the pressed state.

5. To recolor the chrome, open the component and select the Liquid Metal layer to adjust its colors, contrast and speed. Keep the speed the same in every state so the flow never resets on hover.

6. Change the font, padding, radius or face colors right on the canvas. The rim scales with the button, so it works from compact nav buttons to big hero CTAs.

Ideal Use Cases

Metal Rim Button works well for:

• Hero sections that need one standout call to action

• SaaS, AI and product launches with a premium feel

• Portfolios and agency sites that want a crafted, tactile detail

• Waitlist, pricing and sign-up pages that need a clear primary action

One small button, a lot of shine.

5a:[["$","$L5d",null,{"post":{"id":"01a0f69c-4384-750c-8645-83bd803a0a84","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0377da32-5157-43ad-9c57-e949e915db9e","name":"Daniyal Habib","slug":"daniyalweb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1271714/avatar-8E77IXnX9HLKLrOPuUGBp3gf2I7AYE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"tPf5xuVIZZP1ROAXj7pQ","resolved":true,"title":"Metal Rim Button","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Metal Rim Button is a glossy pill CTA for Framer, wrapped in a thin rim of moving liquid chrome. The metal stays mostly black, with soft flashes of orange, red, purple and blue drifting through it. On hover the icon launches up and out while a fresh one slides in from below, and a light glint sweeps across the face. It is built entirely from native Framer layers and a Liquid Gradient shader, so there is no code to manage and every detail stays editable on the canvas."}]},{"type":"paragraph","content":[{"type":"text","text":"How to Use"}]},{"type":"paragraph","content":[{"type":"text","text":"1. Drop "},{"type":"text","text":"Metal Rim Button","marks":[{"type":"bold"}]},{"type":"text","text":" onto any page and pick a "},{"type":"text","text":"Variant","marks":[{"type":"bold"}]},{"type":"text","text":": Default, Large, Dark or Large Dark. Light versions use a bright glossy face, dark versions a deep graphite face."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Set the button text with "},{"type":"text","text":"Title","marks":[{"type":"bold"}]},{"type":"text","text":", and point it to any page, section or external URL with "},{"type":"text","text":"Link","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Choose any Lucide icon with "},{"type":"text","text":"Icon","marks":[{"type":"bold"}]},{"type":"text","text":", or switch off "},{"type":"text","text":"Show Icon","marks":[{"type":"bold"}]},{"type":"text","text":" for a clean text-only pill."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Preview the page and hover to see the launch, glint and shadow lift. Click and hold to see the pressed state."}]},{"type":"paragraph","content":[{"type":"text","text":"5. To recolor the chrome, open the component and select the "},{"type":"text","text":"Liquid Metal","marks":[{"type":"bold"}]},{"type":"text","text":" layer to adjust its colors, contrast and speed. Keep the speed the same in every state so the flow never resets on hover."}]},{"type":"paragraph","content":[{"type":"text","text":"6. Change the font, padding, radius or face colors right on the canvas. The rim scales with the button, so it works from compact nav buttons to big hero CTAs."}]},{"type":"paragraph","content":[{"type":"text","text":"Ideal Use Cases"}]},{"type":"paragraph","content":[{"type":"text","text":"Metal Rim Button works well for:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Hero sections that need one standout call to action"}]},{"type":"paragraph","content":[{"type":"text","text":"• SaaS, AI and product launches with a premium feel"}]},{"type":"paragraph","content":[{"type":"text","text":"• Portfolios and agency sites that want a crafted, tactile detail"}]},{"type":"paragraph","content":[{"type":"text","text":"• Waitlist, pricing and sign-up pages that need a clear primary action"}]},{"type":"paragraph","content":[{"type":"text","text":"One small button, a lot of shine."}]}]},"introduction":"Chrome pill CTA with launch hover","slug":"metal-rim-button","author":{"framerUserId":"0377da32-5157-43ad-9c57-e949e915db9e","name":"Daniyal Habib","slug":"daniyalweb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1271714/avatar-8E77IXnX9HLKLrOPuUGBp3gf2I7AYE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0377da32-5157-43ad-9c57-e949e915db9e/01a0f678-49fa-714b-86f7-de74342ef440.jpg","metadata":{"tint":{"h":0,"s":0,"l":36},"width":2390,"height":1792}}],"post":null,"createdAt":"2026-10-01T08:37:10.267Z","updatedAt":"2026-10-01T08:37:10.267Z","publishedAt":"2026-10-01T08:37:10.264Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Metal-Rim-Button-vu7M7B.js@kOpscp4XIskQvy0Xo0ZK","previewUrl":"https://metal-rim-button.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"kOpscp4XIskQvy0Xo0ZK","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-01T08:37:11.172Z","updatedAt":"2026-10-01T08:37:11.172Z","reported":false}}],"$L5f"]

Suggested for you