How to change color of Bootstrap disabled button?

Question

I am using a bootstrap button on a page of my website and I want to change the color of a disabled button. A button that is "grayed out" and you cannot click. Is there a way I can change the color of this using CSS? Any class for this?

Thank you very much!

Answer 1

In case your button look like this:

<button class="btn btn-primary" disabled>Button</button>

the next CSS code will change its color (when disabled only):

.btn.btn-primary[disabled] {
    background-color: #00ff00;
}

or

.btn.btn-primary:disabled{
    background-color: #00ff00;
}

Answer 2

If I understand your question correctly; you need to use :disabled. Here is a working code:

#work {
  width: 200px;
  height: 50px;
  color: black;
}

#work:disabled{
  background-color: red;
}

<button id="work"disabled="true" type="submit">Button </button>

Answer 3

I had to do this because I was disabling the button in javascript.

 var button = document.querySelector("#button");
            button.disabled = 'disabled';
            button.setAttribute("style", "background-color: #799b48");