50:I[267044,["/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/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 51:T8e6,

Glass Button - Premium Animated Glassmorphism CTA

Smooth jiggle animations, depth controls, and production-ready polish for landing pages, dashboards, portfolios, and SaaS products.

Who It's For

Designers - Add polished animated glass buttons to prototypes and production instantly
SaaS Founders - Ship beautiful conversion-focused CTAs for pricing and heroes
Agencies - Reuse one flexible button across all client projects
Solo Devs - Get pro-level animated buttons without CSS headaches

Quick Start

Drop Glass Button on your canvas
Set a Label like "Start Free Trial"
Add an Icon (optional)
Connect a Link if needed

Smooth hover and click animations, rim lighting, glow effects, and accessible focus states included.

Key Features

Jiggle Animations - Elastic motion on hover and click with Light, Medium, or Heavy intensity

Depth Controls - Flat, Standard, or Inflated glass thickness for any use case

Glass and Glow - Tune tint, blur, radius, border width, and rim glow rotation

Typography - Full control over font, size, weight, and colors

Responsive - Fills parent container. Size via Frames, Stacks, or Grids

Accessible - Keyboard-navigable with clear focus ring

Example Setups

SaaS Pricing - Standard depth, no jiggle, 1.08 hover, Inter 18px bold
Portfolio Hero - Inflated depth, medium jiggle, 1.16 hover, strong glow
Dashboard Toolbar - Flat depth, no jiggle, 1.06 hover, compact padding

Why You'll Love It

One component, endless styles. From minimal SaaS UI to bold marketing buttons with zero code tweaks. Reuse across all projects with custom-feeling animations.

Use for: Pricing pages, hero sections, onboarding, portfolios, toolbars, and CTAs.

Drop it in, customize, and ship.

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-956c02e1-d56c-4868-a6ae-76f8d548b865-all:/unified/creator/956c02e1-d56c-4868-a6ae-76f8d548b865/activity/":[{"data":[{"id":"01a0a794-57ac-712d-b61f-78439f38dda7","type":"creator.followed","target":{"type":"creator","id":"d7b633f0-85d0-4e75-b61f-08c45984e34b","preview":"PixlForm®","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d7b633f0-85d0-4e75-b61f-08c45984e34b/pdzpgzrh","slug":"pixl-form","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"956c02e1-d56c-4868-a6ae-76f8d548b865","name":"Brian Karungani","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/956c02e1-d56c-4868-a6ae-76f8d548b865/b4np6l66","slug":"brian-karungani","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-16T00:18:31.972Z","latestAt":"2026-09-16T00:18:31.972Z"},{"id":"01a0a794-50ed-721f-bef8-119a0c6626f4","type":"creator.followed","target":{"type":"creator","id":"f9a45ea7-b7c6-451d-a946-ee3c1248ad03","preview":"Nerea Trebol","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f9a45ea7-b7c6-451d-a946-ee3c1248ad03/nc1qluyk","slug":"nerea-trebol","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"956c02e1-d56c-4868-a6ae-76f8d548b865","name":"Brian Karungani","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/956c02e1-d56c-4868-a6ae-76f8d548b865/b4np6l66","slug":"brian-karungani","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-16T00:18:30.249Z","latestAt":"2026-09-16T00:18:30.249Z"},{"id":"01a08c7e-cfb5-70fc-9beb-adf86af3df68","type":"creator.followed","target":{"type":"creator","id":"830039ba-56b1-42fc-a371-361e8f7a1e4c","preview":"RedDevs","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/70334/avatar-q9VjO21hdl19yEZkkQj3EgY306N2Yq.jpg","slug":"reddevs","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"956c02e1-d56c-4868-a6ae-76f8d548b865","name":"Brian Karungani","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/956c02e1-d56c-4868-a6ae-76f8d548b865/b4np6l66","slug":"brian-karungani","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-10T18:05:16.077Z","latestAt":"2026-09-10T18:05:16.077Z"},{"id":"01a088b7-efbb-73c9-ad12-cc4fbdc39f06","type":"component.created","target":{"type":"component","id":"nE7fqv1J263G5nTbeRJp","preview":"Glass Button KStudio","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/956c02e1-d56c-4868-a6ae-76f8d548b865/01a088b5-2342-745f-9768-ab69b1e14d63.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"956c02e1-d56c-4868-a6ae-76f8d548b865","name":"Brian Karungani","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/956c02e1-d56c-4868-a6ae-76f8d548b865/b4np6l66","slug":"brian-karungani","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-10T00:29:10.971Z","latestAt":"2026-09-10T00:29:10.971Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:956c02e1-d56c-4868-a6ae-76f8d548b865:/unified/posts/?creator=956c02e1-d56c-4868-a6ae-76f8d548b865&with=reposts":[{"data":[{"id":"01a088b7-ed7a-7767-a2e0-ede861e81ccd","title":null,"body":"

Check out my new glass button!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Check out my new glass button!"}]}]},"author":{"framerUserId":"956c02e1-d56c-4868-a6ae-76f8d548b865","name":"Brian Karungani","slug":"brian-karungani","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/956c02e1-d56c-4868-a6ae-76f8d548b865/b4np6l66","followed":false,"followsYou":false},"media":[],"resources":[{"id":"nE7fqv1J263G5nTbeRJp","resolved":true,"title":"Glass Button KStudio","body":"$51","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Glass Button - Premium Animated Glassmorphism CTA"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Smooth jiggle animations, depth controls, and production-ready polish for landing pages, dashboards, portfolios, and SaaS products.","marks":[{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Who It's For"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Designers","marks":[{"type":"bold"}]},{"type":"text","text":" - Add polished animated glass buttons to prototypes and production instantly"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS Founders","marks":[{"type":"bold"}]},{"type":"text","text":" - Ship beautiful conversion-focused CTAs for pricing and heroes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agencies","marks":[{"type":"bold"}]},{"type":"text","text":" - Reuse one flexible button across all client projects"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Solo Devs","marks":[{"type":"bold"}]},{"type":"text","text":" - Get pro-level animated buttons without CSS headaches"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Quick Start"}],"attrs":{"level":1}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop Glass Button on your canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set a Label like \"Start Free Trial\""}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add an Icon (optional)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Connect a Link if needed"}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"Smooth hover and click animations, rim lighting, glow effects, and accessible focus states included."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Jiggle Animations","marks":[{"type":"bold"}]},{"type":"text","text":" - Elastic motion on hover and click with Light, Medium, or Heavy intensity"}]},{"type":"paragraph","content":[{"type":"text","text":"Depth Controls","marks":[{"type":"bold"}]},{"type":"text","text":" - Flat, Standard, or Inflated glass thickness for any use case"}]},{"type":"paragraph","content":[{"type":"text","text":"Glass and Glow","marks":[{"type":"bold"}]},{"type":"text","text":" - Tune tint, blur, radius, border width, and rim glow rotation"}]},{"type":"paragraph","content":[{"type":"text","text":"Typography","marks":[{"type":"bold"}]},{"type":"text","text":" - Full control over font, size, weight, and colors"}]},{"type":"paragraph","content":[{"type":"text","text":"Responsive","marks":[{"type":"bold"}]},{"type":"text","text":" - Fills parent container. Size via Frames, Stacks, or Grids"}]},{"type":"paragraph","content":[{"type":"text","text":"Accessible","marks":[{"type":"bold"}]},{"type":"text","text":" - Keyboard-navigable with clear focus ring"}]},{"type":"customHeading","content":[{"type":"text","text":"Example Setups"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS Pricing","marks":[{"type":"bold"}]},{"type":"text","text":" - Standard depth, no jiggle, 1.08 hover, Inter 18px bold"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio Hero","marks":[{"type":"bold"}]},{"type":"text","text":" - Inflated depth, medium jiggle, 1.16 hover, strong glow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dashboard Toolbar","marks":[{"type":"bold"}]},{"type":"text","text":" - Flat depth, no jiggle, 1.06 hover, compact padding"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Why You'll Love It"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"One component, endless styles. From minimal SaaS UI to bold marketing buttons with zero code tweaks. Reuse across all projects with custom-feeling animations."}]},{"type":"paragraph","content":[{"type":"text","text":"Use for:","marks":[{"type":"bold"}]},{"type":"text","text":" Pricing pages, hero sections, onboarding, portfolios, toolbars, and CTAs."}]},{"type":"paragraph","content":[{"type":"text","text":"Drop it in, customize, and ship.","marks":[{"type":"italic"}]}]}]},"introduction":"Glass buttons with tactile motion","slug":"glass-button-kstudio","author":{"framerUserId":"956c02e1-d56c-4868-a6ae-76f8d548b865","name":"Brian Karungani","slug":"brian-karungani","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/956c02e1-d56c-4868-a6ae-76f8d548b865/b4np6l66","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/956c02e1-d56c-4868-a6ae-76f8d548b865/01a088b5-2342-745f-9768-ab69b1e14d63.png","metadata":{"tint":{"h":253,"s":90,"l":16},"width":2455,"height":1411}}],"post":null,"createdAt":"2026-09-10T00:29:09.828Z","updatedAt":"2026-09-10T13:59:23.137Z","publishedAt":"2026-09-10T00:29:09.825Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://kamotionstudioglassbutton.framer.website/","price":"5","paymentUrl":"https://contra.com/s/L2F2gYeX-glass-button","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"AOCGgBHb4Gt9KLVh5BU1","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-10T00:29:10.394Z","updatedAt":"2026-09-10T00:29:10.394Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L52"}]