HTML and CSS Reference
In-Depth Information
Notice that we've also assigned a set width to the button, but not a height. Instead, we're let-
ting the height occur as a result of top and bottom padding, defined here using padding short-
hand. We've also added a background color and the necessary box shadow.
The shadow is basically the same as the others—again using black at 25% opacity—but this
time the vertical offset is a little larger. Figure 3.15 shows us how the button looks at this
stage.
Figure 3.15. The promo button with the shadow applied
As you can see, there's still a lot of work to do on the button, not only aesthetically, but also
in terms of position on the page. Let's fix some of that right now by adding a set width to the
element holding the promo text and button. You'll recall, the HTML for that section looks
like this:
<div class="promo-desc">
<h1>Sweet and Sour Zucchini Puree</h1>
<a href="#" class="promo-btn">cook it now!</a>
</div>
We'll add the width to the .promo-desc element, like so:
.promo-desc {
position: absolute;
bottom: 93px;
right: 75px;
width: 316px;
}
Now the promo section looks like what's shown in Figure 3.16 .
Search WWH ::




Custom Search