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

Overview

A sleek, modern button with a soft neumorphic feel and a glowing cyan gradient border that makes it stand out without being aggressive. Perfect for hero sections, contact CTAs, or anywhere you want a polished, high-tech aesthetic that feels premium yet minimal.

What's Included

This component comes in two functional behaviors, split across three variants:

The Auto-Switching Button (Base & Temporary Highlight) — Both of these variants automatically animate the button between its resting and highlighted states — this includes both the text color cycling between the base and temporary highlight color, and the gradient border animating alongside it. The only difference between them is the starting state — Base begins in the gray resting color, while Temporary Highlight begins already in the highlighted state. Pick whichever starting state fits your layout best.

Fixed Version — A calmer alternative that disables all automatic animation entirely. The text stays permanently in the base color, the gradient border stays static, and the only interaction that occurs is on hover. Use this when you want a refined, understated button that doesn't draw unsolicited attention.

Settings

Property Description Text The button label. Defaults to "Contact Us" — change it to anything. Text Base Color The resting text color (default #80878A, soft slate gray). Also the permanent color in the Fixed Version. Text Hover Color The color the text shifts to when hovered (default #82BDCF, bright cyan). Temporary Highlight Text Color The color the text cycles to during the automatic animation in the Base and Temporary Highlight variants (default #82BDCF). Can be set independently from the hover color. Link Optional URL the button navigates to on click. New Tab Toggle whether the link opens in a new browser tab. Smooth Scroll Enable smooth scrolling when linking to an anchor on the same page.

5a:[["$","$L5d",null,{"post":{"id":"019dce27-413a-7963-99ce-ce0f180fbe49","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"A1yKrwe3jO9y3ie0zxD1","resolved":true,"title":"Clean Futuristic Btn","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Overview"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"A sleek, modern button with a soft neumorphic feel and a glowing cyan gradient border that makes it stand out without being aggressive. Perfect for hero sections, contact CTAs, or anywhere you want a polished, high-tech aesthetic that feels premium yet minimal."}]},{"type":"customHeading","content":[{"type":"text","text":"What's Included"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"This component comes in two functional behaviors, split across three variants:"}]},{"type":"paragraph","content":[{"type":"text","text":"The Auto-Switching Button (Base & Temporary Highlight)","marks":[{"type":"bold"}]},{"type":"text","text":" — Both of these variants automatically animate the button between its resting and highlighted states — this includes both the text color cycling between the base and temporary highlight color, and the gradient border animating alongside it. The only difference between them is the starting state — "},{"type":"text","text":"Base","marks":[{"type":"bold"}]},{"type":"text","text":" begins in the gray resting color, while "},{"type":"text","text":"Temporary Highlight","marks":[{"type":"bold"}]},{"type":"text","text":" begins already in the highlighted state. Pick whichever starting state fits your layout best."}]},{"type":"paragraph","content":[{"type":"text","text":"Fixed Version","marks":[{"type":"bold"}]},{"type":"text","text":" — A calmer alternative that disables all automatic animation entirely. The text stays permanently in the base color, the gradient border stays static, and the only interaction that occurs is on hover. Use this when you want a refined, understated button that doesn't draw unsolicited attention."}]},{"type":"customHeading","content":[{"type":"text","text":"Settings"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Property Description "},{"type":"text","text":"Text","marks":[{"type":"bold"}]},{"type":"text","text":" The button label. Defaults to \"Contact Us\" — change it to anything. "},{"type":"text","text":"Text Base Color","marks":[{"type":"bold"}]},{"type":"text","text":" The resting text color (default #80878A, soft slate gray). Also the permanent color in the Fixed Version. "},{"type":"text","text":"Text Hover Color","marks":[{"type":"bold"}]},{"type":"text","text":" The color the text shifts to when hovered (default #82BDCF, bright cyan). "},{"type":"text","text":"Temporary Highlight Text Color","marks":[{"type":"bold"}]},{"type":"text","text":" The color the text cycles to during the automatic animation in the Base and Temporary Highlight variants (default #82BDCF). Can be set independently from the hover color. "},{"type":"text","text":"Link","marks":[{"type":"bold"}]},{"type":"text","text":" Optional URL the button navigates to on click. "},{"type":"text","text":"New Tab","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle whether the link opens in a new browser tab. "},{"type":"text","text":"Smooth Scroll","marks":[{"type":"bold"}]},{"type":"text","text":" Enable smooth scrolling when linking to an anchor on the same page."}]},{"type":"customHeading","attrs":{"level":1}},{"type":"customHeading","attrs":{"level":1}},{"type":"paragraph"}]},"introduction":"Clean Futuristic Button","slug":"clean-futuristic-btn","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/A1yKrwe3jO9y3ie0zxD1/clean-futuristic-btn-B4Rr7kRkF8m4PoaToPQTfIpOXAfV6S","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-16T09:24:47.990Z","updatedAt":"2026-07-30T21:28:10.843Z","publishedAt":"2026-04-27T08:56:12.346Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Clean-Futuristic-Button-ItlAoY.js@h9GTTk2fL9ljPWOOPaTJ","previewUrl":"https://brave-square-114083.framer.app/button-preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"h9GTTk2fL9ljPWOOPaTJ","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-04-27T08:56:12.346Z","updatedAt":"2026-04-27T08:56:12.346Z","reported":false}}],"$L5f"]

Suggested for you