HTML and CSS Reference
In-Depth Information
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
.
1.
/*
2.
========================================
3.
Buttons
4.
========================================
5.
*/
6.
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.
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