title: Disabled button not being styled correctly
body: <p>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 <code>document.getElementById(&quot;updateAccountButton&quot;).disabled = true;</code>. This aforementioned button also has the class of <code>btn-signature-green</code>. Inside my stylesheet, I am trying to set the styling of this button when disabled using:</p>
  <pre><code>.btn-signature-blue:disabled, .btn-signature-green:disabled, .btn-signature-red:disabled {
      /* styles go here */
  }
  
  </code></pre>
  <p>This is because I have other buttons that may have disabled attributes that I want to account for.</p>
  <p>Code snippet:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).on("load", function() {
      document.getElementById("updateAccountButton").disabled = true;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&gt;&lt;/script&gt;
  
  &lt;button class="btn-signature-green" id="updateAccountButton"&gt;disabled button&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>