K-Squared Ramblings

Creating CSS Buttons

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:

Your browser shows this as:

Valid XHTML XFN Friendly

Here’s the CSS and HTML used for this version: Read the rest of this entry »