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: none;
    font: 2.25em /* 36px ÷ 16 */ 'BebasNeueRegular';
    background-color: #b01c20;
}

Next, let's add our rounded corners. Note that, as in the rest of this chapter, for all the CSS3 properties I'll be adding it may be necessary to define vendor prefixes. I have omitted them here for the sake of brevity:

#content a {
    text-decoration: none;
    font: 2.25em /* 36px ÷ 16 */ 'BebasNeueRegular';
    background-color: #b01c20;
    border-radius: 8px;
}

Here's what we've got at this point:

Now, let's make the text white (again, as I want this viewable on older browsers, I've stuck to a simple color definition) and add padding (you could use percentage based padding too) so there's always a little space around the text:

#content a {
    text-decoration: none;
    font: 2.25em /* 36px ÷ 16 */ 'BebasNeueRegular';
    background-color: #b01c20;
    border-radius: 8px;
    color: white;
    padding: 30px;
}

Here's what that gives us:

At this point the padding is encroaching on the text above so we'll add a float: left declaration along with the gradient:

#content a {
    text-decoration: none;
    font: 2.25em /* 36px ÷ 16 */ 'BebasNeueRegular';
    background-color: #b01c20;
    border-radius: 8px;
    color: white;
    padding: 30px;
    float: left;
    background: linear-gradient(90deg, #b01c20 0%, #f15c60 100%);
}

Now it's starting to take shape in the browser:

Besides adding a little margin above, I'll also go ahead and add the box shadow:

#content a {
    text-decoration: none;
    font: 2.25em /* 36px ÷ 16 */ 'BebasNeueRegular';
    background-color: #b01c20;
    border-radius: 8px;
    color: white;
    padding: 30px;
    float: left;
    background: -moz-linear-gradient(90deg, #b01c20 0%,#f15c60 100%);
    margin-top: 30px;
    box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);
}

And a quick check in the browser reveals we're almost done:

Now, although it's not in the Photoshop file, I'm going to add a little text-shadow and a thin white border, just to give it a slightly embossed feel. That's the beauty of using CSS rather than image files—it's easy to evaluate changes on the fly!

#content a {
    text-decoration: none;
    font: 2.25em /* 36px ÷ 16 */ 'BebasNeueRegular';
    background-color: #b01c20;
    border-radius: 8px;
    color: white;
    padding: 30px;
    float: left;
    background: -moz-linear-gradient(90deg, #b01c20 0%,#f15c60 100%);
    margin-top: 30px;
    box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);
    text-shadow: 0px 1px black;
    border: 1px solid #bfbfbf;
}

Now here's how our button looks in Firefox 8:

The only issue left is that our double angle quotes symbol (» in HTML) in the Photoshop file is in a different font from the main text. I don't feel that loading an extra font for the single character is worthwhile in this instance, so I'm going to wrap that symbol in an inline tag so that I can increase the size. Here's the amended markup:

<a href=”#”>these should have won <span>&raquo;</span></a>

Additionally, here's the extra CSS rule to adjust the size:

#content a span {
    font-size: 1.3em;
}

Which finishes things off nicely:

What's great about this as CSS3, rather than an image, is that it can contain whatever content is needed, and it will never break up: