HTML and CSS Reference
In-Depth Information
with what is there (though perhaps you could wrap the button in some-
thing or use generated content in interesting ways).
Background images can do a lot for a button: add depth, add the look of
ready to press and depressed states, and create many other effects that
a mix of color and border alone cannot do.
Submit button sizes are typically flexible to allow for a wide range of text
lengths or font sizes. A fixed-size button paired with a single nonrepeat-
ing background image can lead to text escaping the boundaries of the
graphic. With controlled button labels or a large enough button style
providing leeway for these cases, the fixed width and height is possible.
Otherwise, stick with repeatable patterns and borders used to mark the
sides of the element.
The
text-shadow
property described in Chapter 9 is a useful way to
enhance button text styling. Background images are nice, but they
come with some noted inflexibility. The
border-radius
property, when
combined with color gradients (Chapter 14), can make creating flexible
and good-looking buttons quite simple.
The CSS Tricks Button Maker (
http://css-tricks.com/examples/
ButtonMaker/
)
is a little demo app that lets you adjust all these
properties visually and then shows you the CSS code behind it.
Links are often interchangeable with submit buttons in a site's design.
The call to action may sometimes be associated with a form but often
not. Choose a class to use for links that should be styled similarly to
