Skip to: Navigation | Content | Sidebar | Footer


Full Archives

Anchor Buttons

September 17

I can't be the only one bored to tears of simple border and background colour styling for button formatting.

I recently worked on an application that used a common graphical button style across all pages, but didn't offer common HTML elements to work with. Some of the buttons were clearly better implemented as a elements, whereas the rest were proper input buttons.

This is, of course, maddening. There's literally no way to format an a and an input element identically across all browsers, aside from hard-wiring the text of that button into an image and using it to replace the element. That's not exactly a viable fix on an application with dozens or hundreds of buttons.

I needed a middle ground. Images were necessary to pull off things like bevels and rounded corners and gradients and all those effects that make a button look like a button. But I needed HTML text to allow for easy button creation, and preferably in a way that would allow me to use both anchors and buttons interchangeably.

So I pulled up the Particletree button article from a few years back and went to work. After converting the input elements to buttons, I was able to work through most major cross-browser issues and come up with a set of styles that worked well on both those and anchor elements. You can see the results here, or download the source and images.

Quick update: some of the comments lead me to believe I wasn't clear enough about what's happening in these examples. You'll see three sets of two buttons rendered identically side-by-side. On the left, the button is being constructed with the button element. On the right, the button is instead constructed with the a element. Same visual styling, but different markup.

This is just an incremental update over ground the original Particletree article has covered well, so I won't bother writing up a detailed explanation. You've got the theory, and I think a quick look at the source ought to make the method fairly apparent.

A couple of caveats though: obviously there were concessions made in terms of extra markup for the sake of background images. And IE6/IE7 naturally don't want to play fair; there's a conditional comment that pulls in a touch-up CSS file for alignment, and it was necessary to fix the button widths to a hard pixel value. All other browsers expand and contract the buttons gracefully along with the text size, but IE marches to its own beat once again. And Chrome was launched in between when I originally built the demo page and today as I write this, but a quick look tells me it does the right thing.

Share and enjoy.

Permalink › | 28 comments