HTML and CSS Reference
In-Depth Information
26.
}
You'll notice that most of these properties and values revolve around the box mod-
form controls, ensuring that they are laid out appropriately. Aside from adding
some box model styles, we're adjusting the
color
and
font-weight
of a few
elements.
9.
So far, so good: our form is coming together quite nicely. The only remaining ele-
ment yet to be styled is the submit button. As it's a button, we actually have some
existing styles we can apply here. If we think back to our home page, our hero sec-
tion contained a button that received some styles by way of the
btn
class attribute
value.
Let's add this class attribute value,
btn
, along with a new class attribute value of
btn-default
to our submit button. Specifically we'll use the class name of
btn-default
since this button is appearing on a white
background
and will
be the default style for buttons moving forward.
1.
<input
class="btn btn-default"
type="submit" name="submit"
value="Purchase">
Now our submit button has some shared styles with the button on the home page.
We'll use the
btn-default
class attribute value to then apply some new styles
to our submit button specifically.
Going back to the buttons section of our
main.css
file, let's add the following:
1.
.btn-default {
2.
border: 0;
3.
background: #648880;
4.
padding: 11px 30px;
5.
font-size: 14px;
6.
}
7.
.btn-default:hover {
8.
background: #77a198;
9.
}
These new styles, which define the size and
background
of our submit button,
are then combined with the existing
btn
class styles to create the final presenta-
tion of our submit button.
Search WWH ::
Custom Search