style.css

* {
  box-sizing: border-box;
}

.btn {
  --background-hue: 0;
  --background-saturation: 0%;
  --initial-background-lightness: 90%;
  --background-lightness: var(--initial-background-lightness);
  --border-lightness: calc(var(--background-lightness) - 20%);

  background-color: hsl(
    var(--background-hue),
    var(--background-saturation),
    var(--background-lightness)
  );
  border: 1px solid
    hsl(
      var(--background-hue),
      var(--background-saturation),
      var(--border-lightness)
    );
  outline: none;
  cursor: pointer;
  padding: 0.5em 1em;
  border-radius: 0.3em;
}

.btn:hover,
.btn:focus {
  --background-lightness: calc(var(--initial-background-lightness) - 10%);
  box-shadow: 0 0 5px 0
    hsl(
      var(--background-hue),
      var(--background-saturation),
      var(--border-lightness)
    );
}

.btn-primary {
  --background-hue: 271;
  --background-saturation: 70%;
  --initial-background-lightness: 50%;
  color: white;
}

.btn-accent {
  --background-hue: 200;
  --background-saturation: 100%;
  --initial-background-lightness: 40%;
  color: white;
}

.btn-danger {
  --background-hue: 0;
  --background-saturation: 60%;
  --initial-background-lightness: 50%;
  color: white;
}

.btn-large {
  font-size: 1.25rem;
}

.btn-small {
  font-size: 0.5rem;
}

.btn-pill {
  border-radius: 999px;
}

.btn-custom {
  background: linear-gradient(
    to right,
    hsl(271, 70%, 50%),
    hsl(200, 100%, 40%)
  );
  color: white;
  border-color: #222;
}

.btn-custom:hover,
.btn-custom:focus {
  background: linear-gradient(
    to right,
    hsl(271, 70%, 40%),
    hsl(200, 100%, 30%)
  );
  border-color: black;
  box-shadow: 0 0 5px 0 black;
}