HTML and CSS Reference
In-Depth Information
Figure 3.16. A width added to the
.promo-desc
element
The other button on the page appears below the “Latest Recipes” section. We're going to use
many of the same styles on that button, so let's save a few lines of code by doing the follow-
ing:
<a href="#" class="promo-btn more-btn">discover more
recipes</a>
Here we've added the
.promo-btn
class to the Discover more recipes button, in addition
to adding a secondary class. So this button will have all the styles of the original button, in-
cluding the shadow, but then we'll make some modifications via the
.more-btn
class:
.more-btn {
text-align: center;
float: right;
margin-right: 50px;
width: 280px;
}
We'll finish up the look of those buttons in the next two chapters.
