HTML and CSS Reference
In-Depth Information
background color to ensure your design remains readable in browsers that don't display the
gradient.
Figure 5.9
displays the promo button after adding the gradient.
Figure 5.9. Our promo button after adding a linear gradient
Next we have the gradient to add to the button at the bottom of the “Latest Recipes” section.
Here's the code:
.more-btn {
text-align: center;
float: right;
margin-right: 50px;
width: 280px;
background-color: #2d1e10;
background-image: linear-gradient(#6b5139, #2d1e10);
}
Again we've added a fallback background color for non-supporting browsers and the linear
gradient is just a simple top to bottom two-color gradient.
Figure 5.10
shows us the button
with the gradient.
