@utrecht/button-css/dist/html/index.min.css

Button component for the Municipality of Utrecht based on the NL Design System architecture

button,input[type=button i],input[type=reset i],input[type=submit i]{--_utrecht-button-background-color:var(
    --_utrecht-button-hint-background-color,var(--_utrecht-button-appearance-background-color,var(--utrecht-button-background-color))
  );--_utrecht-button-color:var(
    --_utrecht-button-hint-color,var(--_utrecht-button-appearance-color,var(--utrecht-button-color))
  );--_utrecht-button-border-color:var(
    --_utrecht-button-hint-border-color,var(--_utrecht-button-appearance-border-color,var(--utrecht-button-border-color,transparent))
  );--_utrecht-button-border-bottom-color:var(
    --_utrecht-button-hint-border-bottom-color,var(
      --_utrecht-button-hint-border-color,var(
        --_utrecht-button-appearance-border-bottom-color,var(
          --_utrecht-button-appearance-border-color,var(--utrecht-button-border-bottom-color,var(--utrecht-button-border-color,transparent))
        )
      )
    )
  );--_utrecht-button-disabled-background-color:var(
    --_utrecht-button-hint-disabled-background-color,var(
      --_utrecht-button-appearance-disabled-background-color,var(--utrecht-button-disabled-background-color,var(--utrecht-button-background-color))
    )
  );--_utrecht-button-disabled-border-color:var(
    --_utrecht-button-hint-disabled-border-color,var(
      --_utrecht-button-appearance-disabled-border-color,var(--utrecht-button-disabled-border-color,var(--utrecht-button-border-color))
    )
  );--_utrecht-button-disabled-color:var(
    --_utrecht-button-hint-disabled-color,var(--_utrecht-button-appearance-disabled-color,var(--utrecht-button-disabled-color,var(--utrecht-button-color)))
  );--_utrecht-button-pressed-background-color:var(
    --_utrecht-button-hint-pressed-background-color,var(
      --_utrecht-button-hint-background-color,var(
        --_utrecht-button-appearance-pressed-background-color,var(
          --_utrecht-button-appearance-background-color,var(--utrecht-button-pressed-background-color,var(--utrecht-button-background-color))
        )
      )
    )
  );--_utrecht-button-pressed-border-color:var(
    --_utrecht-button-hint-pressed-border-color,var(
      --_utrecht-button-hint-border-color,var(
        --_utrecht-button-appearance-pressed-border-color,var(
          --_utrecht-button-appearance-border-color,var(--utrecht-button-pressed-border-color,var(--utrecht-button-border-color))
        )
      )
    )
  );--_utrecht-button-pressed-color:var(
    --_utrecht-button-hint-pressed-color,var(
      --_utrecht-button-hint-color,var(
        --_utrecht-button-appearance-pressed-color,var(--_utrecht-button-appearance-color,var(--utrecht-button-pressed-color,var(--utrecht-button-color)))
      )
    )
  );--_utrecht-button-focus-background-color:var(
    --_utrecht-button-hint-focus-background-color,var(
      --_utrecht-button-hint-background-color,var(
        --_utrecht-button-appearance-focus-background-color,var(
          --_utrecht-button-appearance-background-color,var(--utrecht-button-focus-background-color,var(--utrecht-button-background-color))
        )
      )
    )
  );--_utrecht-button-focus-border-color:var(
    --_utrecht-button-hint-focus-border-color,var(
      --_utrecht-button-hint-border-color,var(
        --_utrecht-button-appearance-focus-border-color,var(
          --_utrecht-button-appearance-border-color,var(--utrecht-button-focus-border-color,var(--utrecht-button-border-color))
        )
      )
    )
  );--_utrecht-button-focus-color:var(
    --_utrecht-button-hint-focus-color,var(
      --_utrecht-button-hint-color,var(
        --_utrecht-button-appearance-focus-color,var(--_utrecht-button-appearance-color,var(--utrecht-button-focus-color,var(--utrecht-button-color)))
      )
    )
  );--_utrecht-button-hover-background-color:var(
    --_utrecht-button-hint-hover-background-color,var(
      --_utrecht-button-hint-background-color,var(
        --_utrecht-button-appearance-hover-background-color,var(
          --_utrecht-button-appearance-background-color,var(--utrecht-button-hover-background-color,var(--utrecht-button-background-color))
        )
      )
    )
  );--_utrecht-button-hover-border-color:var(
    --_utrecht-button-hint-hover-border-color,var(
      --_utrecht-button-hint-border-color,var(
        --_utrecht-button-appearance-hover-border-color,var(
          --_utrecht-button-appearance-border-color,var(--utrecht-button-hover-border-color,var(--utrecht-button-border-color))
        )
      )
    )
  );--_utrecht-button-hover-color:var(
    --_utrecht-button-hint-hover-color,var(
      --_utrecht-button-hint-color,var(
        --_utrecht-button-appearance-hover-color,var(--_utrecht-button-appearance-color,var(--utrecht-button-hover-color,var(--utrecht-button-color)))
      )
    )
  );--_utrecht-button-active-background-color:var(
    --_utrecht-button-hint-active-background-color,var(
      --_utrecht-button-hint-background-color,var(
        --_utrecht-button-appearance-active-background-color,var(
          --_utrecht-button-appearance-background-color,var(--utrecht-button-active-background-color,var(--utrecht-button-background-color))
        )
      )
    )
  );--_utrecht-button-active-border-color:var(
    --_utrecht-button-hint-active-border-color,var(
      --_utrecht-button-hint-border-color,var(
        --_utrecht-button-appearance-active-border-color,var(
          --_utrecht-button-appearance-border-color,var(--utrecht-button-active-border-color,var(--utrecht-button-border-color))
        )
      )
    )
  );--_utrecht-button-active-color:var(
    --_utrecht-button-hint-active-color,var(
      --_utrecht-button-hint-color,var(
        --_utrecht-button-appearance-active-color,var(--_utrecht-button-appearance-color,var(--utrecht-button-active-color,var(--utrecht-button-color)))
      )
    )
  );--_utrecht-button-border-width:var(--_utrecht-button-appearance-border-width,var(--utrecht-button-border-width,0));--_utrecht-button-border-block-end-width:var(
    --utrecht-button-border-bottom-width,var(--_utrecht-button-border-width,0)
  );--_utrecht-button-font-size:var(--_utrecht-button-appearance-font-size,var(--utrecht-button-font-size));--_utrecht-button-line-height:var(--_utrecht-button-appearance-line-height,var(--utrecht-button-line-height));--utrecht-icon-size:var(--utrecht-button-icon-size,1em);align-items:center;background-color:var(--_utrecht-button-background-color);block-size:fit-content;border-block-end-color:var(--_utrecht-button-border-bottom-color);border-block-end-width:var(--_utrecht-button-border-block-end-width);border-color:var(--_utrecht-button-border-color);border-radius:var(--utrecht-button-border-radius);border-style:solid;border-width:var(--_utrecht-button-border-width);box-sizing:border-box;color:var(--_utrecht-button-color);column-gap:var(--utrecht-button-column-gap);cursor:var(--utrecht-action-activate-cursor,revert);display:inline-flex;font-family:var(--utrecht-button-font-family,var(--utrecht-document-font-family));font-size:var(--_utrecht-button-font-size,var(--utrecht-document-font-family,inherit));font-weight:var(--_utrecht-button-appearance-font-weight,var(--utrecht-button-font-weight));inline-size:var(--utrecht-button-inline-size,auto);justify-content:center;line-height:var(--_utrecht-button-line-height);margin-block-end:var(--utrecht-button-margin-block-end);margin-block-start:var(--utrecht-button-margin-block-start);margin-inline-end:var(--utrecht-button-margin-inline-end);margin-inline-start:var(--utrecht-button-margin-inline-start);max-inline-size:var(--utrecht-button-max-inline-size,fit-content);min-block-size:var(--utrecht-button-min-block-size,44px);min-inline-size:var(--utrecht-button-min-inline-size,44px);padding-block-end:var(--utrecht-button-padding-block-end);padding-block-start:var(--utrecht-button-padding-block-start);padding-inline-end:var(--utrecht-button-padding-inline-end);padding-inline-start:var(--utrecht-button-padding-inline-start);scale:1;text-transform:var(--utrecht-button-text-transform);-webkit-user-select:none;user-select:none}button[hidden]{display:none}button[type=submit i],input[type=submit i]{cursor:var(--utrecht-action-submit-cursor,revert)}button:disabled,button[aria-disabled=true]{background-color:var(--_utrecht-button-disabled-background-color);border-color:var(--_utrecht-button-disabled-border-color);color:var(--_utrecht-button-disabled-color);cursor:var(--utrecht-action-disabled-cursor,not-allowed)}button:disabled[aria-busy=true],button[aria-busy=true],button[aria-disabled=true][aria-busy=true]{cursor:var(--utrecht-action-busy-cursor,wait)}button:active:not([aria-disabled=true],:disabled){background-color:var(--_utrecht-button-active-background-color);border-color:var(--_utrecht-button-active-border-color);color:var(--_utrecht-button-active-color)}button:hover:not([aria-disabled=true],:disabled){background-color:var(--_utrecht-button-hover-background-color);border-color:var(--_utrecht-button-hover-border-color);color:var(--_utrecht-button-hover-color);scale:var(--utrecht-button-hover-scale,1)}button:focus:not([aria-disabled=true],:disabled){background-color:var(--_utrecht-button-focus-background-color);border-color:var(--_utrecht-button-focus-border-color);color:var(--_utrecht-button-focus-color);scale:var(--utrecht-button-focus-scale,1)}button:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert);z-index:1}