CSS Buttons
A few months ago I started using css-based buttons on my site for things like the W3C badges, and on Wednesday I decided to add a Firefox link to pages where I didn’t want to use a graphic.
The basic idea is that instead of a graphic, you use a basic text link with the structure: <a><span>Get</span> Firefox</a> and style it to appear like this: Get Firefox
The span lets you style two regions in the link, and you apply two classes to the the a: one for the general look (borders, padding, font) and one for the specific category (standards/validation, features, etc.)
Here’s the HTML:
<a class="btn ff" href="http://www.spreadfirefox.com/?q=affiliates&id=880&t=1" title="Get Firefox! Take back the web."><span>Get</span> Firefox</a>
(Don’t forget to update the link to use your ID!)
And here’s the CSS (cleaned up for readability; I condense it down to one line per rule):
a.btn {
font: 8pt Arial, Helvetica, sans-serif;
padding: 0 .5em 0 0;
border: 1px #000 solid;
text-decoration: none;
}
a.btn span {
border-right: 1px solid #000;
margin: 0 0.1em 0 0;
padding: 0 0.5em;
}
a.ff:link, a.ff:visited {
color: #fff;
background: #009;
}
a.ff:hover, a.ff:active {
background: #99f;
}
a.ff span {
background: #f93;
color: #000;
}
Update: I should probably point out that I arrived at this particular stylesheet after quite a bit of cross-browser testing (follow the link at the top to read about the whole process). It works perfectly in:
- Gecko browsers (of course)
- IE 5.5 and later
- Opera 6 and later
- Safari and (current) Konqueror
IE 5.0 gets everything but the borders. Older versions of Opera get the padding a bit off, and don’t quite get the hover effects right, but otherwise manage OK. Netscape 4 doesn’t recognize the multiple classes, which saves it from some really annoying CSS bugs (if you set padding, margins or borders on a link in NS4, it ceases to be clickable!) I haven’t tried it with Konqueror older than 3.2.
