HTML and CSS Reference
In-Depth Information
First, we've taken a shortcut in this example by using the
a
selector instead of declaring separate
a:link
and
a:visited
states. You should generally try and declare both states independently of one another, but
for the sake of this example, we've cut that corner. Do as we say, not as we… You know the rest.
Second, we're adding a background image using the shorthand
background
property. This property is a
rolled up version whose value contains the
background-color
,
background-image
,
background-
repeat
, and
background-position
properties.
Third, the
display
property has a value of
inline-block
. This property value allows an element to have
properties similar to that of a block-level element while still displaying inline and adjacent to other content.
Thus, you can add properties such as margin, padding, width, and height that are otherwise limited to
block-level elements. Support for this property value has only recently gained widespread support in all
major browsers.
Lastly, the
text-shadow
property, as you can probably divine, adds a text shadow to the button. This
property is new to CSS3 and, as such, may not render in every browser. Don't worry, though: browsers
that don't understand the
text-shadow
property will happily ignore it. The
text-shadow
property accepts
four values:
A positive or negative integer (with an appropriate CSS unit of measure) defining the horizontal
offset of the shadow. Positive values place the shadow to the right of the text and negative values
place the shadow to the left of the text.
A positive or negative integer (with an appropriate CSS unit of measure) defining the vertical
offset of the shadow. Positive values move the shadow down (relative to the text) and negative
values move the shadow up (relative to the text).
A positive integer (with an appropriate CSS unit of measure) defining the blur radius of the
shadow. The larger the integer, the blurrier the shadow.
A CSS color definition.
There you have it: an anchor element styled to resemble a button!
A Word of Caution
What you've done in this example is take one of the defining elements of the Web—the mighty anchor
element—and completely reconfigured its appearance. Gone is the underlined blue link of the past! In with
the flexibility of CSS!
With this power, though, comes a certain degree of responsibility. Users have grown to expect links on a
web page to look like, well… links. Particularly, the expectation is that links are underlined text of a color
different from that of the surrounding text. What we've introduced to you in this example breaks that mental
model.
Now, there's nothing fundamentally wrong with styling certain links to look like buttons. In fact, well-
designed anchor elements can increase usability by providing clear calls to action. You do, however, have
to keep your users in mind. Always take care when choosing presentation styles for anchors.
