title: CSS3 Background Plus Transparency Without Images
body: <p>I have a solid background color on a button, and I'm looking for some CSS(3?) that would overlay a semi-transparent white on top of the color, but only on the top 50% of it.  I'm looking for a non-gradient, non-image-based shine effect.</p>
  
  <p>How can this be accomplished without using an image?  It's ok if the solution doesn't support older browsers.</p>
  
  <p><strong>EDIT:</strong>  bookcasey's answer below seems to work except the font is also made transparent...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  a
  {
      display: inline-block;
      padding:30px;
      background: salmon;
      position: relative;
      text-align: center;
      text-decoration:none;
      color:#000;
      font-size:20pt;
      font-weight:bold;
  }
  
  a:before
  {
      content: '';
      width: 100%;
      height: 50%;
      background: rgba(255,255,255,0.5);
      position: absolute;
      top: 0;
      left:0;
  }
  &lt;/style&gt;
  &lt;/html&gt;
  &lt;body&gt;
  
  &lt;div&gt;
      &lt;a href="#"&gt;Test Link&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>Andy</p>