A CSS button utility that derives its background from a data-color attribute, then automatically calculates readable text and hover colors using modern CSS color functions.

button.css

.button {
  --_bg-color: attr(data-color type(<color>), #000);

  @apply rounded-md px-3.5 py-2.5 text-sm font-semibold;

  background-color: var(--_bg-color);
  color: color-mix(
    in lch increasing hue,
    var(--_bg-color) 10%,
    contrast-color(var(--_bg-color))
  );

  transition: all .2s ease-in-out;

  &:hover {
    background-color: color-mix(
      in lch increasing hue,
      var(--_bg-color) 85%,
      contrast-color(var(--_bg-color))
    );
  }
}