Skip to content

Instantly share code, notes, and snippets.

@Jursdotme
Created May 18, 2026 06:23
Show Gist options
  • Select an option

  • Save Jursdotme/206805b75a29df3c315be45ab6970615 to your computer and use it in GitHub Desktop.

Select an option

Save Jursdotme/206805b75a29df3c315be45ab6970615 to your computer and use it in GitHub Desktop.
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 {
--_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))
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment