Better Buttons with color-mix() and Custom Properties

Let's build a button that accepts one color and calculates its hover and focus states automatically. For this experiment, we'll use CSS Custom Properties , color-mix() , and OKLCH to ensure that tints and shades are perceptually uniform. To keep things simple, we'll follow today's flat design trend and use a single color for the background. We'll store that color in a custom property so we can reuse it and change things up as we go. Let's kick things off with some styles. /* Set some defaults for the button