web-expressive/dist/components/button.css

A standard-first frontend toolkit based on Material Expressive design language intent.

@layer design-system.components{.button{--_button-corner:calc((var(--_block-size) - var(--_inner-padding) * 2) / 2);--_button-transitions:border-radius var(--sys-motion-spring-fast-spatial-duration) var(--sys-motion-spring-fast-spatial), outline-width var(--sys-motion-spring-fast-spatial-duration) var(--sys-motion-spring-pop-focus);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;justify-content:center;align-items:center;gap:var(--_gap);cursor:var(--_cursor);isolation:isolate;padding-inline:var(--_padding-inline);inline-size:fit-content;block-size:var(--_block-size);color:var(--_color);font:var(--_font);user-select:none;white-space:nowrap;background:0 0;border:none;outline:none;text-decoration:none;display:inline-flex;position:relative;&:before{z-index:-1;transition:var(--_button-transitions);inset:var(--_inner-padding) 0px;outline:var(--_outline-width) solid var(--sys-color-secondary);outline-offset:2px;box-shadow:var(--_shadow);border:var(--_border);border-radius:var(--_border-radius);background:var(--_background);content:"";position:absolute}&:after{z-index:-1;transition:var(--_button-transitions);inset:var(--_inner-padding) 0px;border-radius:var(--_border-radius);background:var(--_state);content:"";position:absolute}&:not(:disabled){--_background:var(--sys-color-primary);--_border:none;--_border-radius:var(--_button-corner);--_cursor:pointer;--_color:var(--sys-color-on-primary);--_state:transparent;--_shadow:none;--_outline-width:0px;&:hover{--_state:oklch(from var(--_color) l c h / 8%)}&:focus-visible{--_state:oklch(from var(--_color) l c h / 10%);--_outline-width:3px}&:active{--_border-radius:var(--_pressed-button-corner);--_state:oklch(from var(--_color) l c h / 10%)}&.outline{--_background:none;--_border:1px solid var(--sys-color-outline-variant);--_color:var(--sys-color-on-surface-variant)}&.tonal{--_background:var(--sys-color-secondary-container);--_color:var(--sys-color-on-secondary-container)}&.elevated{--_background:var(--sys-color-surface-container-low);--_color:var(--sys-color-primary);--_shadow:var(--sys-elevation-level-1)}&.text{--_background:none;--_color:var(--sys-color-primary)}}&:disabled{--_background:oklch(from var(--sys-color-on-surface) l c h / 10%);--_border:none;--_border-radius:var(--_button-corner);--_cursor:not-allowed;--_color:oklch(from var(--sys-color-on-surface) l c h / 38%);--_state:oklch(from var(--sys-color-on-primary) l c h / 8%);&.outline{--_border:1px solid var(--sys-color-outline-variant)}}& .icon{--_fill:1;inline-size:var(--_icon-font-size);block-size:var(--_icon-font-size);font-size:var(--_icon-font-size);line-height:1;font-family:var(--ref-typeface-symbols);font-variation-settings:"FILL" var(--_fill), "wght" 400, "GRAD" 0, "opsz" 24;font-feature-settings:"liga";white-space:nowrap;display:inline-block;overflow:clip;&.no-fill{--_fill:0}&:is(svg){fill:var(--_color)}&:is(img){object-fit:cover}}}.button{--_block-size:3rem;--_pressed-button-corner:var(--sys-shape-corner-small);--_font:var(--sys-typescale-label-large);--_gap:var(--sys-measurement-space-100);--_icon-font-size:1.25rem;--_inner-padding:var(--sys-measurement-space-50);--_padding-block:var(--sys-measurement-space-125);--_padding-inline:var(--sys-measurement-space-200);&:not(.round){@container style(--shape-items:square){--_button-corner:var(--sys-shape-corner-medium)}}&.square{--_button-corner:var(--sys-shape-corner-medium)}&:not(.small){@container style(--size-items:extra-small){--_block-size:3rem;--_pressed-button-corner:var(--sys-shape-corner-small);--_font:var(--sys-typescale-label-large);--_gap:var(--sys-measurement-space-50);--_icon-font-size:1.25rem;--_inner-padding:var(--sys-measurement-space-100);--_padding-block:var(--sys-measurement-space-75);--_padding-inline:var(--sys-measurement-space-150);&:not(.round){@container style(--shape-items:square){--_button-corner:var(--sys-shape-corner-medium)}}&.square{--_button-corner:var(--sys-shape-corner-medium)}}@container style(--size-items:medium){--_block-size:3.5rem;--_pressed-button-corner:var(--sys-shape-corner-medium);--_font:var(--sys-typescale-title-medium);--_gap:var(--sys-measurement-space-100);--_icon-font-size:1.5rem;--_inner-padding:var(--sys-measurement-space-0);--_padding-block:var(--sys-measurement-space-200);--_padding-inline:var(--sys-measurement-space-300);&:not(.round){@container style(--shape-items:square){--_button-corner:var(--sys-shape-corner-large)}}&.square{--_button-corner:var(--sys-shape-corner-large)}}@container style(--size-items:large){--_block-size:6rem;--_pressed-button-corner:var(--sys-shape-corner-large);--_font:var(--sys-typescale-headline-small);--_gap:var(--sys-measurement-space-150);--_icon-font-size:2rem;--_inner-padding:var(--sys-measurement-space-0);--_padding-block:var(--sys-measurement-space-400);--_padding-inline:var(--sys-measurement-space-600);&:not(.round){@container style(--shape-items:square){--_button-corner:var(--sys-shape-corner-extra-large)}}&.square{--_button-corner:var(--sys-shape-corner-extra-large)}}@container style(--size-items:extra-large){--_block-size:8.5rem;--_pressed-button-corner:var(--sys-shape-corner-large);--_font:var(--sys-typescale-headline-large);--_gap:var(--sys-measurement-space-200);--_icon-font-size:2.5rem;--_inner-padding:var(--sys-measurement-space-0);--_padding-block:var(--sys-measurement-space-600);--_padding-inline:var(--sys-measurement-space-800);&:not(.round){@container style(--shape-items:square){--_button-corner:var(--sys-shape-corner-extra-large)}}&.square{--_button-corner:var(--sys-shape-corner-extra-large)}}}&.extra-small{--_block-size:3rem;--_pressed-button-corner:var(--sys-shape-corner-small);--_font:var(--sys-typescale-label-large);--_gap:var(--sys-measurement-space-50);--_icon-font-size:1.25rem;--_inner-padding:var(--sys-measurement-space-100);--_padding-block:var(--sys-measurement-space-75);--_padding-inline:var(--sys-measurement-space-150);&:not(.round){@container style(--shape-items:square){--_button-corner:var(--sys-shape-corner-medium)}}&.square{--_button-corner:var(--sys-shape-corner-medium)}}&.medium{--_block-size:3.5rem;--_pressed-button-corner:var(--sys-shape-corner-medium);--_font:var(--sys-typescale-title-medium);--_gap:var(--sys-measurement-space-100);--_icon-font-size:1.5rem;--_inner-padding:var(--sys-measurement-space-0);--_padding-block:var(--sys-measurement-space-200);--_padding-inline:var(--sys-measurement-space-300);&:not(.round){@container style(--shape-items:square){--_button-corner:var(--sys-shape-corner-large)}}&.square{--_button-corner:var(--sys-shape-corner-large)}}&.large{--_block-size:6rem;--_pressed-button-corner:var(--sys-shape-corner-large);--_font:var(--sys-typescale-headline-small);--_gap:var(--sys-measurement-space-150);--_icon-font-size:2rem;--_inner-padding:var(--sys-measurement-space-0);--_padding-block:var(--sys-measurement-space-400);--_padding-inline:var(--sys-measurement-space-600);&:not(.round){@container style(--shape-items:square){--_button-corner:var(--sys-shape-corner-extra-large)}}&.square{--_button-corner:var(--sys-shape-corner-extra-large)}}&.extra-large{--_block-size:8.5rem;--_pressed-button-corner:var(--sys-shape-corner-large);--_font:var(--sys-typescale-headline-large);--_gap:var(--sys-measurement-space-200);--_icon-font-size:2.5rem;--_inner-padding:var(--sys-measurement-space-0);--_padding-block:var(--sys-measurement-space-600);--_padding-inline:var(--sys-measurement-space-800);&:not(.round){@container style(--shape-items:square){--_button-corner:var(--sys-shape-corner-extra-large)}}&.square{--_button-corner:var(--sys-shape-corner-extra-large)}}}}