Glass Button & Card

Release desk

Signal layer

Monitor launch readiness, review pending work, and move the release forward from one compact surface.

Signal quality

Review queue

Launch state

Component Code (Next.js)

Use Copy Code to load the current local source for the Glass button and card components.

Claude / Codex Prompt

Create reusable GlassButton and GlassCard components from this extracted HTML/CSS recipe:
- CTA button dimensions around 217px by 46px with a 99px pill radius.
- Transparent glass fill using the 182.51deg low-opacity gradient.
- Layered drop shadows, backdrop-filter blur(10px), clipped overflow, and a gradient-border pseudo element.
- Support the larger navbar pill variant around 309px wide with 1px gradient border.
- Add a subtle noise overlay equivalent to the original ::after filter.
- Build a matching card component that uses the same frosted surface, gradient border, blur, shadow depth, and noise texture.
- Keep real button/link semantics, visible focus states, responsive sizing, and reduced-motion support.