elements-sk/modules/styles/buttons.scss

// A set of styles to make buttons and select/options look more Material Design-ish.

@import '../themes/themes';

button {
  min-width: 5.14em;
  background-color: var(--surface);
  color: var(--on-surface);
  fill: var(--on-surface);
  text-align: center;
  text-transform: uppercase;
  outline: none;
  padding: 0.6em 1.2em;
  border: solid var(--on-surface) 1px;
  margin: 0.6em;
  height: 3em;
}

button:hover {
  background: var(--surface-1dp);
}

button.action:hover {
  background: var(--primary-variant);
  color: var(--on-primary-variant);
  fill: var(--on-primary-variant);
}

button:focus {
  outline: dashed 2px var(--on-surface);
  outline-offset: 3px;
}

button:active,
button.action:active,
button.fab:active {
  background-color: var(--background);
  color: var(--on-background);
  fill: var(--on-background);
}

button:disabled {
  background: var(--disabled);
  border-color: var(--on-disabled);
  color: var(--on-disabled);
  fill: var(--on-disabled);
}

button.action {
  color: var(--on-primary);
  fill: var(--on-primary);
  background: var(--primary);
  border: solid rgba(0, 0, 0, 0) 1px;
}

button.action:disabled {
  background: var(--disabled);
  color: var(--on-disabled);
  fill: var(--on-disabled);
}

button.fab {
  color: var(--on-secondary);
  fill: var(--on-secondary);
  background: var(--secondary);
  border-radius: 50%;
  border: none;
  padding: 10px;
  width: 48px;
  height: 48px;
  min-width: 0px;
  font-weight: bold;
  font-size: 22px;
}