Four intents: primary (filled blue→violet glass), secondary (soft-metal default), ghost (outline), and danger (on-palette magenta for destructive actions). Each is a real machined slab — layered bevel, contact shadow, and ambient lift — not flat decoration.
Touch targets stay generous: large = 50px, default = 40px with padded hit area. Icon buttons carry an aria-label so they're announced to screen readers.
Toggles use the real aria-pressed state (not a colour-only hack), so assistive tech announces "pressed / not pressed". The engaged state fills with the brand gradient and lights its status pip. Try Tab then Space.
Press for the "pressed-in well" physics. Loading swaps the label for a precision spinner and blocks input. Disabled desaturates and removes pointer events. Keyboard focus shows a high-contrast dual ring on every variant — tab through to see it.
<link rel="stylesheet" href="buttons.css">
<button class="cg-btn cg-btn--primary">Deploy</button>
<button class="cg-btn cg-btn--ghost">Cancel</button>
<button class="cg-btn cg-btn--danger">Revoke</button>
<button class="cg-btn cg-btn--toggle" aria-pressed="false">Watch</button>
<button class="cg-btn cg-btn--icon" aria-label="Settings">⚙</button>
No JS required for styling or states — only the optional toggle handler below flips aria-pressed. Honors prefers-reduced-motion, prefers-contrast, and Windows forced-colors mode automatically.