css-sandbox/buttons/button.css

button {
  /* Style reset */
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
}

.button {
  cursor: pointer;

  /* default for <button>, but useful for <a> */
  display: inline-block;
  text-align: center;
  text-decoration: none;

  /* create a small space when buttons wrap on 2 lines */
  margin: 2px 0;

  /* invisible border (will be colored on hover/focus) */
  border: solid 1px transparent;
  border-radius: 4px;

  /* size comes from text & padding (no width/height) */
  padding: 0.5em 1em;

  /* make sure colors have enough contrast! */
  color: #000;
  background-color: var(--color-primary);
}

.button:active {
  transform: translateY(1px);
  filter: saturate(150%);
}
.button:hover,
.button:focus {
  border-color: currentColor;
  background-color: var(--color-primary-saturated);
}

.button--inline {
  
}

.button--secondary {
  background-color: var(--color-secondary);
  color: white;
}
.button--secondary:hover,
.button--secondary:focus {
  border-color: currentColor;
  background-color: var(--color-secondary-saturated);
}
.button--success {
  background-color: var(--color-success);
  color: white;
}
.button--success:hover,
.button--success:focus {
  border-color: currentColor;
  background-color: var(--color-success-saturated);
}
.button--warning {
  background-color: var(--color-warning);
  color: #000;
}
.button--warning:hover,
.button--warning:focus {
  border-color: currentColor;
  background-color: var(--color-warning-saturated);
}
.button--danger {
  background-color: var(--color-danger);
  color: white;
}
.button--danger:hover,
.button--danger:focus {
  border-color: currentColor;
  background-color: var(--color-danger-saturated);
}