title: css button text and button background different opacity
body: <p>hopefully you can help with a simple question about CSS. I'm trying to make a button (doesn't need to be html class button) with a transparent background and an outline with text that does not have the same opacity as the button. That is, the text should remain at a different opacity than the button. Is this possible? </p>
  
  <p>My attempt at a fiddle to solve this here - <a href="http://jsfiddle.net/9jXYt/" rel="noreferrer">http://jsfiddle.net/9jXYt/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>#xxx {
    outline:white solid 0.5px;
    /*opacity: 0.2; */
    background-color: rgba(255,0,0,0.2);
    padding: 6px 8px;
    border-radius: 3px;
    color: black;
    font-weight: bold;
    border: none;
    margin: 0;
    /*box-shadow: 0px 2px 3px #444;*/
  }
  
  #xxx:hover {
     opacity: 0.9; 
  }
  
  #fff {
      font-family: helvetica, arial, sans-serif;
      font-size: 19pt;
      opacity: 1 !important;
      color: rgba(0,0,0,0.5) !important;
  }
  </code></pre>
  
  <p>HTML:
      <code>&lt;button id="xxx"&gt;&lt;div id="fff"&gt;This is a test&lt;/div&gt;&lt;/button&gt;</code></p>
  
  <p>Thanks in advance for any hints. </p>