CSS button color can't be override by parent

Question

Consider the following HTML and CSS codes

I can't figure out why the button text is not red, and I also don't know how to let the parent override the button's color:

.red {
  color: red !important;
}

<div class="red">
  <button>Should be red</button>
</div>

Ori Drori · Accepted Answer · 2025-04-27 19:05:42Z

3

The button has an explicit color defined by the browser's stylesheet. You can change the button's color to inherit, and then it would get the color from the parent:

button {
  color: inherit;
}

.red {
  color: red;
}

<div class="red">
  <button>Should be red</button>
</div>

answered Apr 27 at 19:05

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Olga S · Accepted Answer · 2025-04-28 07:10:37Z

0

If your project uses a single type of button with the same styles, you can use the following CSS code:

button {
  color: red;
}

If you have different types of buttons, assign a different class to each button and define the styles separately. For example:

HTML:

<button class="btn1"></button>

CSS:

.btn1 {
  color: red;
}

answered Apr 28 at 7:10

Olga S

3144 bronze badges

Collectives™ on Stack Overflow

CSS button color can't be override by parent

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related