@ou-imdt/css/src/native/button.css

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

/* Buttons should even be a <button> or an element with the following attributes role="button" AND a class of button AND a tabindex="-1/0/1" */

:root,
:host {
  /* Buttons (inc. Input:Button & Input:Submit) */
  --btn-weight: normal;
  --btn-transition: background 0.25s, color 0.25s;
  --btn-spacing: 0.2em;
  --btn-inline-padding: 0.7em 0.0em;
  --btn-padding: 0.2rem 0.7rem;
  --btn-bg: #ffffff;
  --btn-fg: var(--core1, var(--accent));
  --btn-decoration: none;
  --btn-radius: 3px;
  --btn-border: 2px solid var(--core2, var(--accent));
  --btn-outline: 2px var(--accent) solid;
  --btn-outline-offset: 1px;

  --btn-hover-bg: var(--core1);
  --btn-hover-fg: var(--bg1);
  --btn-hover-decoration: underline;
  --btn-hover-decoration-thickness: 1px;
  --btn-hover-underline-offset: 2px;

  /* --btn-focus-bg: var(--core1);
    --btn-focus-fg: var(--bg1); */
  --btn-focus-bg: var(--bg1);
  --btn-focus-fg: var(--fg1);
  --btn-focus-decoration: underline;
  --btn-focus-decoration-thickness: 1px;
  --btn-focus-underline-offset: 2px;
  --btn-focus-border: 2px solid var(--core2, var(--accent));

  --btn-focus-visible-bg: var(--bg1);
  --btn-focus-visible-fg: var(--core1);
  --btn-focus-visible-decoration: underline;
  --btn-focus-visible-decoration-thickness: 1px;
  --btn-focus-visible-underline-offset: 2px;
  --btn-focus-visible-border: 2px solid #000000;

  --btn-active-fg: var(--accent);
  --btn-active-bg: #D8D6E6;
  --btn-active-decoration: underline;
  --btn-active-decoration-thickness: 1px;
  --btn-active-underline-offset: 2px;
  --btn-active-boxshadow: inset 0 3px 0px -1px #666, inset 0 4px 4px -1px #666;
  --btn-disabled-border: 2px solid #d4d2d2;
  --btn-disabled-bg: #B3B3B3;
  --btn-disabled-fg: var(--bg1, #ffffff);
  /* --btn-disabled-filter: var(--disabled-filter); */
  --btn-disabled-opacity: 1;
}



button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.button[role="button"],
.button[role="button"][tabindex] {
  display: inline-block;
  border: var(--btn-border);
  border-radius: var(--btn-radius, --radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  margin: var(--btn-spacing) 0;
  padding: var(--btn-padding);
  min-height: var(--wcag-min-target);
  min-width: var(--wcag-min-target);
  transition: var(--btn-transition);
  outline-offset: var(--btn-outline-offset);
  text-decoration: var(--btn-decoration);
  font-weight: var(--btn-weight);

  >svg * {
    fill: currentColor;
  }
}

/* button[aria-pressed="true"],
input[type="button"][aria-pressed="true"],
a.button[role="button"]:active,
.button[role="button"][aria-pressed="true"][tabindex] {
  background: var(--btn-active-bg, var(--btn-fg));
  color: var(--btn-active-fg, var(--btn-bg));
  box-shadow: inset 0 3px 5px 1px hsla(0, 0%, 100%, 0.301);
  transform: translateY(1px);
} */

button:hover:not(:disabled),
button.hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
input[type="reset"]:hover:not(:disabled),
a.button[role="button"]:hover:not(:disabled),
.button[role="button"][tabindex]:hover:not(:disabled) {
  background: var(--btn-hover-bg, var(--btn-fg));
  color: var(--btn-hover-fg, var(--btn-bg));
  cursor: var(--interactive-cursor);
  text-decoration: var(--btn-hover-decoration);
  text-decoration-thickness: var(--btn-hover-decoration-thickness);
  text-underline-offset: var(--btn-hover-underline-offset);
}

button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
a.button[role="button"]:focus,
.button[role="button"][tabindex]:focus {
  outline: var(--btn-outline);
  background: var(--btn-focus-bg, var(--btn-fg));
  color: var(--btn-focus-fg, var(--btn-bg));
  border: var(--btn-focus-border);
  text-decoration: var(--btn-focus-decoration);
  text-decoration-thickness: var(--btn-focus-decoration-thickness);
  text-underline-offset: var(--btn-focus-underline-offset);
}


button:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="button"]:focus-visible,
a.button[role="button"]:focus-visible,
.button[role="button"][tabindex]:focus-visible {
  outline: var(--btn-outline);
  background: var(--btn-focus-visible-bg, var(--btn-fg));
  color: var(--btn-focus-visible-fg, var(--btn-bg));
  border: var(--btn-focus-visible-border);
  text-decoration: var(--btn-focus-visible-decoration);
  text-decoration-thickness: var(--btn-focus-visible-decoration-thickness);
  text-underline-offset: var(--btn-focus-visible-underline-offset);
}

button:active:not(:disabled),
button.active:not(:disabled),
input[type="submit"]:active:not(:disabled),
input[type="reset"]:active:not(:disabled),
input[type="button"]:active:not(:disabled),
a.button[role="button"]:active:not(:disabled),
.button[role="button"][tabindex]:active:not(:disabled),
button[aria-pressed="true"]:not(:disabled),
input[type="button"][aria-pressed="true"]:not(:disabled),
a.button[role="button"]:active:not(:disabled),
.button[role="button"][aria-pressed="true"][tabindex]:not(:disabled) {
  background: var(--btn-active-bg, var(--btn-fg));
  color: var(--btn-active-fg, var(--btn-bg));
  box-shadow: var(--btn-active-boxshadow);
}

:is(span, p, h1, h2, h3, h4, h5, h6, blockquote) button,
:is(span, p, h1, h2, h3, h4, h5, h6, blockquote) input[type="button"],
:is(span, p, h1, h2, h3, h4, h5, h6, blockquote) a.button {
  /* max-height: 100%; */
  padding: 0 var(--btn-inline-padding);
  margin: 0;
}

button:disabled,
input[type="button"]:disabled {
  opacity: var(--btn-disabled-opacity);
  background: var(--btn-disabled-bg, var(--btn-bg));
  color: var(--btn-disabled-fg, var(--btn-fg));
  border: var(--btn-disabled-border);
}