Until now, we've largely been looking at abstract implementations of various CSS3 features. Let's use them together now to create our THESE SHOULD HAVE WON>> link. On the original Photoshop composite file for the AND THE WINNER ISN'T website, the button text uses custom typography, which we've already dealt with in Chapter 5, CSS3: Selectors, Typography, and Color Modes. However, it also has a red gradient background with rounded corners and a drop shadow behind it. This is what we have defined in the stylesheet currently:
#content a {
text-decoration: none;
font: 2.25em /* 36px ÷ 16 */ 'BebasNeueRegular';
} First, let's add a solid background color for older browsers. That way, should they be unable to render the gradient, they will at least get a solid red background. I've purposely used a HEX value here because if the older browser doesn't understand gradients, it's unlikely to support RGB and HSL color modes:
#content a {
text-decoration...