A few months ago I started using css-based buttons on my website 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 href="http://www.spreadfirefox.com/?q=affiliates&id=880&t=1" class="btn ff"="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; }
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.
Originally posted on my Spread Firefox blog.