TaskBuild .button with custom-prop API: --bg, --fg, --pad-x, --pad-y, --font-size, --radius. Default values are primary + medium. Variants override the props: .button.danger sets --bg to --danger. .button.success sets --bg to --success. .button.secondary sets --bg to --surface, --fg to --text, adds border. .button.sm sets --pad-x to var(--space-sm) and --pad-y to 6px. .button.lg sets --pad-x to var(--space-lg) and --pad-y to var(--space-md). All have transition + hover (lift -1px) + active (back down) + focus-visible (outline 2px primary).
Capstone 2: Button component with 6 variants
200 XP14 min
Theory
The .button component as the canonical example
3 sizes (sm, md, lg) Γ 4 colors (primary, secondary, danger, success) = 12 visual variants. We build it via custom-property props so the CSS stays minimal.
Plus four interaction states (rest, hover, active, focus-visible) handled correctly per WCAG.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.