<button>button</button>
<button disabled="disabled">disabled button</button>

<div style="--hue: 0">
  <button>button</button>
  <button disabled="disabled">disabled button</button>
</div>

<div style="--hue: 120">
  <button>button</button>
  <button disabled="disabled">disabled button</button>
</div>

button {
  --lightness: 50%;
  background-color: hsl(var(--hue, 220), 80%, var(--lightness));
}

button:hover {
  background-color: hsl(var(--hue, 220), 80%, calc(var(--lightness) - 20%));
}

button:disabled {
  background-color: hsl(var(--hue, 220), 10%, 50%);
}






















button {
  padding: 10px 15px;
  border-radius: 5px;
  margin: 10px;
  font-size: 16px;
  border: none;
  color: white;
}

button:not(:disabled) {
  cursor: pointer;
}