Disabled button not being styled correctly - css

Question

I am trying to style a button that is disabled, but the styling doesn't take effect, and go back to the old styling. I have cleared my cache, to no avail. I have a button that gets disabled using JavaScript with document.getElementById("updateAccountButton").disabled = true;. This aforementioned button also has the class of btn-signature-green. Inside my stylesheet, I am trying to set the styling of this button when disabled using:
.btn-signature-blue:disabled, .btn-signature-green:disabled, .btn-signature-red:disabled {
/* styles go here */
}
This is because I have other buttons that may have disabled attributes that I want to account for.
Code snippet:
$(window).on("load", function() {
document.getElementById("updateAccountButton").disabled = true;
});
/* disabled button */
.btn-signature-blue:disabled, .btn-signature-green:disabled, .btn-signature-red:disabled {
background-color: #afafaf;
color: white;
}
.btn-signature-green {
-moz-box-shadow: 0px 6px 11px -7px #5fd623;
-webkit-box-shadow: 0px 6px 11px -7px #5fd623;
box-shadow: 0px 6px 11px -7px #5fd623;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #67e827), color-stop(1, #81de52));
background: -moz-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -webkit-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -o-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -ms-linear-gradient(top, #67e827 5%, #81de52 100%);
background: linear-gradient(to bottom, #67e827 5%, #81de52 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#67e827', endColorstr='#81de52', GradientType=0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: inline-block;
border: 0px;
cursor: pointer;
color: #ffffff !important;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 5px 11px;
text-decoration: none;
}
/* the green button when hovered over */
.btn-signature-green:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #81de52), color-stop(1, #67e827));
background: -moz-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -webkit-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -o-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -ms-linear-gradient(top, #81de52 5%, #67e827 100%);
background: linear-gradient(to bottom, #81de52 5%, #67e827 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#81de52', endColorstr='#67e827', GradientType=0);
background-color: #81de52;
color: black !important;
}
/* the green button when clicked */
.btn-signature-green:active {
position: relative;
top: 1px;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<button class="btn-signature-green" id="updateAccountButton">disabled button</button>

Answer 1

The disabled style is overlapped by the parent style.
Instead of background-color, use background on :disabled style.
And the parent button has got color style with !important so it is needed to set the color with important on :disabled selector style.
And to disable hover effect when disabled, it is needed to set pointer-events: none;.
$(window).on("load", function() {
document.getElementById("updateAccountButton").disabled = "disabled";
});
/* disabled button */
.btn-signature-blue:disabled, .btn-signature-green:disabled, .btn-signature-red:disabled {
background: red;
color: blue !important;
pointer-events: none;
}
.btn-signature-green {
-moz-box-shadow: 0px 6px 11px -7px #5fd623;
-webkit-box-shadow: 0px 6px 11px -7px #5fd623;
box-shadow: 0px 6px 11px -7px #5fd623;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #67e827), color-stop(1, #81de52));
background: -moz-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -webkit-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -o-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -ms-linear-gradient(top, #67e827 5%, #81de52 100%);
background: linear-gradient(to bottom, #67e827 5%, #81de52 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#67e827', endColorstr='#81de52', GradientType=0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: inline-block;
border: 0px;
cursor: pointer;
color: #ffffff !important;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 5px 11px;
text-decoration: none;
}
/* the green button when hovered over */
.btn-signature-green:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #81de52), color-stop(1, #67e827));
background: -moz-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -webkit-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -o-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -ms-linear-gradient(top, #81de52 5%, #67e827 100%);
background: linear-gradient(to bottom, #81de52 5%, #67e827 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#81de52', endColorstr='#67e827', GradientType=0);
background-color: #81de52;
color: black !important;
}
/* the green button when clicked */
.btn-signature-green:active {
position: relative;
top: 1px;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<button class="btn-signature-green" id="updateAccountButton">disabled button</button>

Answer 2

You are using two different properties, you are setting a background on your button but a background-color on the disabled, background takes priority so it looks like it doesn't work as you'd expect.
To fix this you just need to use the same properties between disabled and active buttons.