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&amp;id=880&amp;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.

Several months ago, I went on a minor site optimizing kick. One thing I decided to do was replace the validation labels with something smaller, less obtrusive, and directly on the page. I tried to duplicate the look of the classic antipixel-style buttons (like the ones you see on the sidebar here) by splitting a link into two <span> elements, but had so much trouble getting borders and height to match up correctly that I wrote it off completely.

After a while I came back to it, and started with very simple buttons like this:

How the first CSS badges should look

Your browser shows this as:

Valid XHTML XFN Friendly

Here’s the CSS and HTML used for this version: Continue reading