title: How do I remove gradient on :active state?
body: <p>I need to make a button look flat on the :active state.</p>
  
  <p>Let's say, for instance, I have:</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>button {
      background:linear-gradient(#fc9, #ed8) /* some light orange gradient */
  }
  button:hover {
      background:linear-gradient(#ed8, #da7) /* some darker orange gradient on hover */
  }
  button:active {
      background:orange; /* And here I need just plane flat orange color */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button&gt;Click Me!&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But instead of that, I am getting the gradient from the previous state.</p>
  
  <p>Are there any background CSS properties to kind of turn off that gradient? </p>
  
  <p>e.g. <code>blackground:liner-gradient-OFF; or background:no-inherit;</code></p>