title: Color not working on active button
body: <p>I am trying to get the css font color to change to white when a button is pressed, however the only way I can currently do this is if I use !important and force the color to change. Is there a way to do this without using !important? Here is my code:</p>
  
  <p>Currently the button font color changes to the background color of .modal-close, unless I use !important to force it to change to white. Is there any way to make this work properly without using !important? Any help would be appreciated.</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-css lang-css prettyprint-override"><code>.modal-close {
      width: 30px;
      height: 30px;
      border-radius:30px;
      border: 1px solid $gray-light;
      font-size: 14px;
      font-weight: 200;
  }
  .modal-close-x {
      position: relative;
      right: 3px;
      bottom: 4px;
  }
  .modal-close:focus {
      outline: 0;
  }
  .modal-close:active {
      background: #41b97c;
      color: #ffffff; /* want this to work without !important */
      border: 1px solid #41b97c;
  }
  .modal-close:hover {
      border: 1px solid #41b97c;
      color: #41b97c;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button  class="modal-close pull-right" aria-label="Close" &gt;
      &lt;span class="modal-close-x" aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>