title: CSS Box Shadow - Hover Class
body: <p>I'm trying to build a generic hover class that uses box-shadow amd that will work with multiple colors of buttons. For this reason, I want the "shadow" to be different for every color of button. I'm trying to figure out if there is a way to use or set only the color attribute of a shadow element?</p>
  
  <p>Here is what I mean:</p>
  
  <pre><code>/*Notice that .button shadows does not have a color value*/
  
  .button {
      -webkit-box-shadow: 
      0px 8px 16px 0px;
      box-shadow:
      0px 8px 16px 0px;
  }
  
  .button:hover{
      -webkit-box-shadow: 
      0px 16px 16px 0px;
      box-shadow:
      0px 16px 16px 0px;
  }
  
  /*And color elements does not have other values for the shadow*/
  
  .red{
      -webkit-box-shadow: 
      rgba(255, 0, 0, 0.1);
      box-shadow:
      rgba(255, 0, 0, 0.1);
  }
  .green{
      -webkit-box-shadow: 
      rgba(0, 255, 0, 0.1);
      box-shadow:
      rgba(0, 255, 0, 0.1);
  }
  </code></pre>
  
  <p>...to be used as follows:</p>
  
  <pre><code>&lt;div class="button red&gt;Red Button&lt;/div&gt;
  &lt;div class="button green&gt;Green Button&lt;/div&gt;
  </code></pre>
  
  <p>I hope that explains the situation. Brainstorm time!</p>