<p>Consistent tints and shades for all colors. Try hovering and clicking each button to see how tints and shades are calculated.</p>

<button type="button">
  Click me
</button>

<button type="button" style="--button-bg: deeppink;">
  Click me
</button>

<button type="button" style="--button-bg: dodgerblue;">
  Click me
</button>

<button type="button" style="--button-bg: rebeccapurple;">
  Click me
</button>

<button type="button" style="--button-bg: #e47816;">
  Click me
</button>

<button type="button" style="--button-bg: green;">
  Click me
</button>

<br><br>

<label for="color">Select a color</label><br>

<button type="button" style="--button-bg: #2298b6;" id="custom">
  Choose any color
</button>

<input id="color" type="color" value="#2298b6">

/* Set some defaults for the button */
:root {
  --button-bg: slategrey;
}

/* Remove factory button styles and add our own */
button {
  font: 16px sans-serif;
  border: none;
  border-radius: 6px;
  background-color: var(--button-bg);
  color: white;
  padding: .875rem 1.125rem;
  margin: 0;
  cursor: pointer;
  transition: 100ms background-color, 100ms translate;
}

/* Tint the background when hovering */
button:hover {
  background-color: color-mix(in oklab, var(--button-bg) 100%, white 8%);
}

/* Shade the background when clicked */
button:active {
  background-color: color-mix(in oklab, var(--button-bg) 100%, black 4%);
  translate: 0 1px;
}

/* Remove the default focus ring */
button:focus {
  outline: none; 
}

/* Provide a color-matched focus ring for keyboard users */
button:focus-visible {
  outline: solid 3px var(--button-bg);
  outline-offset: 1px;
}


/* Demo only */
html,
body {
  font: 16px sans-serif;
  padding: 0;
  margin: 0;
}

body {
  padding: 1rem; 
}

p {
  max-width: 70ch; 
}

label {
  display: inline-block;
  margin-bottom: .25rem; 
}

const button = document.querySelector('#custom');
const color = document.querySelector('input[type="color"]');

color.addEventListener('input', () => {
  button.style.setProperty('--button-bg', color.value);
});