How do I make a button's color dependent on the background color in CSS?

Making a button's color dependent on its background color in CSS can be achieved using a few different techniques. The goal is to ensure the button text is always readable, regardless of the background color. Here are some common approaches:

1. Using CSS Variables and Contrast Calculation:

- This method involves using CSS variables to store the background color and then using a function to calculate the contrast and determine the appropriate text color (either black or white). This is a more advanced approach but provides the most reliable results.

- Here's an example:

.button-container {
  --bg-color: #3498db; / Example background color /
  background-color: var(--bg-color);
  padding: 10px;
}

.button {
  background-color: transparent;
  border: none;
  padding: 10px 20px;
  color: var(--text-color);
  cursor: pointer;
}

<div class="button-container" style="--bg-color: #3498db;">
  <button class="button">Click Me</button>
</div>

<script>
  function calculateContrast(hexcolor) {
    hexcolor = hexcolor.replace("#", "");
    const r = parseInt(hexcolor.substring(0, 2), 16);
    const g = parseInt(hexcolor.substring(2, 4), 16);
    const b = parseInt(hexcolor.substring(4, 6), 16);
    const yiq = ((r 299) + (g 587) + (b 114)) / 1000;
    return (yiq >= 128) ? 'black' : 'white';
  }

  document.querySelectorAll('.button-container').forEach(container => {
    const bgColor = getComputedStyle(container).getPropertyValue('--bg-color').trim();
    const textColor = calculateContrast(bgColor);
    container.style.setProperty('--text-color', textColor);
  });
</script>

2. Using CSS Filters (Less Reliable):

- You can use CSS filters like filter: invert(1) to invert the colors. However, this approach can be unreliable and may not always produce the desired contrast, especially with complex background colors.

- Example:

.button {
  background-color: #3498db; / Example background color /
  color: white; / Initial text color /
  filter: invert(1); / Invert colors /
}

3. Using Predefined Color Schemes:

- If you have a limited set of background colors, you can define specific text colors for each background color using CSS classes.

- Example:

.button-light {
  background-color: #f0f0f0;
  color: black;
}

.button-dark {
  background-color: #333;
  color: white;
}

4. Using JavaScript to Dynamically Set Colors:

- You can use JavaScript to read the background color of the button and then set the text color accordingly. This approach is more flexible but requires JavaScript.

- Example:

<button id="myButton" style="background-color: #3498db;">Click Me</button>

<script>
  const button = document.getElementById('myButton');
  const bgColor = getComputedStyle(button).backgroundColor;
  const textColor = calculateContrast(bgColor);
  button.style.color = textColor;
</script>

The best approach depends on your specific needs and the complexity of your project. For most cases, using CSS variables with a contrast calculation function provides the most reliable and flexible solution.

Learn more about this