So there I was, starting on a new side project when I hit a wall, which should not have happened (see why near the end). The mock up in Illustrator called for a button that had a gradient background, but was also semi-transparent. I like to use Microsoft's SVG Gradient Background Maker when I want to use CSS gradients. It eliminates the need of a graphic and works in IE9+, Chrome, Safari and Opera, but oddly not Firefox. Unfortunately, this gradient generator does not allow you to define the opacity level, and so you're stuck with fully opaque colors. Here's the default example's SVG code:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
    <linearGradient id="g660" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop stop-color="#FFFFFF" offset="0"/>
        <stop stop-color="#E3A820" offset="1"/>
    </linearGradient>
    <rect x="0" y="0" width="1" height="1" fill="url(#g660)" />
</svg>

The neat thing about the SVG approach is that text is base64 encoded and can be included in your CSS file, but again, it's missing the semi-transparency that I needed for my project. The solution is to add a stop-opacity attribute to <stop>, whose values range from 0.0 to 1.0, then base64 encode the SVG XML:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
    <linearGradient id="g660" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop stop-opacity=".3" stop-color="#FFFFFF" offset="0"/>
        <stop stop-opacity=".3" stop-color="#E3A820" offset="1"/>
    </linearGradient>
    <rect x="0" y="0" width="1" height="1" fill="url(#g660)" />
</svg>

There are plenty of base64 encoders/decoders, so pick your favorite. The above XML could be thrown into an SVG file and referenced like an image, and using the base64 encode approach adds a lot of characters to your CSS, and if you have a lot of them, the file size could get bloated, if you will. Conversely, you won't be making your visitors download another image or increase the size of a image sprite. It really comes down to personal preference.

I spent about 20 to 30 minutes trying to figure out this solution when I had the "answer" in front of me the whole time with the Ultimate CSS Gradient Generator. With this tool, you can create CSS gradients for all browsers that can support gradients in some fashion, while also giving you the option to specify the opacity. Decoding the SVG version would have shown me the XML attribute stop-opacity, and saved me a little bit of time.

I like to think that my googling skills don't suck, but it took me a while to actually learn there was a stop-opacity attribute. My impatience probably got the better of me and I simply missed the answer. Unfortunately, I went with an image based solution because there was a small semi-transparent rounded border, which stopped when it reached the top, and browsers are can't quite render buttons that rival ones created in photo editors.