HTML and CSS Reference
In-Depth Information
Click here to view code image
1. <a class="btn btn-alt" >...</a>
Now let's create some styles for those classes within our CSS. Below our typo-
graphy rule set, let's create a new section of the CSS file for buttons.
To begin let's add the btn class and apply some common styles that can be shared
across all buttons. We'll want all of our buttons to have a 5 -pixel border-ra-
dius . They should be displayed as inline-block elements so we can add
padding around all four sides without issue; we'll remove any margin .
Click here to view code image
1. /*
2. ========================================
3. Buttons
4. ========================================
5. */
7. .btn {
8. border-radius: 5px;
9. display: inline-block;
10. margin: 0;
11. }
We'll also want to include styles specific to this button, which we'll do by using
the btn-alt class. Here we'll add a 1 -pixel, solid , gray border with 10 pixels
of padding on the top and bottom of the button and 30 pixels of padding
on the left and right of the button.
Click here to view code image
1. .btn-alt {
2. border: 1px solid #dfe2e5;
3. padding: 10px 30px;
4. }
Using both the btn and btn-alt classes on the same <a> element allows these
styles to be layered on, rendering all of the styles on a single element.
7. Because we're working on the home page, let's also add a bit of padding to the
<section> element that contains our <a> element with the classes of btn and
btn-alt . We'll do so by adding a class attribute value of hero to the <sec-
tion> element, alongside the container class attribute value, as this will be
the leading section of our website.
Search WWH ::

Custom Search