Foundation HTML5 with CSS3

Linking the Web

Listing 6-25. An anchor element

Back to the Power Outfitters homepage

Listing 6-26. An anchor element styled using CSS

a {
border: 3px solid #111;
background: #666 url("arrow.png") no-repeat 15px 50%;
color: #fff;
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 15px 20px 15px 45px;
text-shadow: 1px 1px 0 #000;
text-decoration: none;
}

a:hover {
background-color: #555;
border-color: #fff;
border-style: dashed;
}

a:active {
background-color: #c99;
border-color: #c00;
padding: 16px 19px 14px 46px;
}

Figure 6-9 shows the output of the code in the previous two listings.

Figure 6-9. Browser output of an anchor element styled with CSS

The markup in Listing 6-25 should look familiar; there’s nothing too crazy going on there. We have
introduced some interesting style properties in Listing 6-26, though. Let’s take a look.