title: Using CSS :after to shade a button:hover
body: <p>I'm trying to add a bunch of different color classes to my buttons and allow additional classes to be added arbitrarily.  All of these should darken on hover.  It seems tedious to write <code>button.(color):hover</code> rules for every single color, so I've written this such that the <code>:after</code> section gets darker and covers the button background.</p>
  
  <p><a href="http://jsfiddle.net/kjpczL5w/1/" rel="nofollow">http://jsfiddle.net/kjpczL5w/1/</a></p>
  
  <p>However, I can't get the <code>:after</code> section to fit between the button's text and its background as desired.  At the moment, it also shades the text.  The idea here is to remove any tedious part of adding a new button element or a new button color class, so I'd like to avoid additional html or additional css rules for each color.  Ideas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>button {
      border: 0;
      padding: 1em;
      position: relative;
      cursor: pointer;
      background: none;
  }
  button:after {
      content: " ";
      transition: background-color .3s ease;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
  button:hover:after { background-color: rgba(0, 0, 0, 0.3); }
  button.green { background-color: #6c842e; color: #ffffff; }
  button.red { background-color: #ff4444; color: #ffffff; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button&gt;Boop&lt;/button&gt;
  &lt;button class="green"&gt;Boop&lt;/button&gt;
  &lt;button class="red"&gt;Boop&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>