HTML and CSS Reference
In-Depth Information
button actions, and style both together in your code. And while you're
at it, don't forget the different states for each or the other types of
button elements (the
button
element as well as the button
input
type).
Figure 11.9
(on the next page) shows three different clickable HTML
elements styled similarly.
input[type="submit"],
button,
a.button:link, a.button:visited {
font: 12px/16px Arial, sans-serif; /* for input */
padding: 2px 0.5em;
color: #333;
background-color: #aaa;
border: 2px inset #aaa;
text-decoration: none; /* for link */
}
a.button:link, a.button:visited { /* fix some apparent box
model differences */
padding-top: 3px;
padding-bottom: 3px;
}
input[type="submit"]:hover, input[type="submit"]:focus,
button:hover, button:focus,
a.button:hover, a.button:active {
color: #000;
background-color: #999;
}
input[type="submit"]:disabled,
button:disabled,
a.button.disabled {
(continues on next page)
