How To Change Color Of Bootstrap Disabled Button?

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

Solution 1:

In case your button look like this:

<buttonclass="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;
}

Solution 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;
}

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

Solution 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");