#225

Button glass variants

Three native buttons using the glass button classes over a brand to info gradient backdrop.

0 px

Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.

Build the "Button glass variants" pattern (@codeatlasdev/ui demo #225, foundation/materials) in my app.

Call get_demo({ ids: ["#225"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Choosing between the default, prominent and clear glass button styles on a colorful or image background.

Keep these library parts, with the props and tokens the demo uses:

Behaviour to keep:
- `<button type="button" class="glass-btn">` labelled glass-btn
- `<button type="button" class="glass-btn-prominent">` labelled glass-btn-prominent
- `<button type="button" class="glass-btn-clear">` labelled glass-btn-clear
- Backdrop is `linear-gradient(135deg, var(--ca-brand-main), var(--ca-semantic-info))`

Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.

Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours.

Button glass variants

Library parts

How it is built

Related