Skip to navigation [a]

May 9, 2006

Sliding Doors of CSS Buttons //

One of the small tasks I set for myself in working on an upcoming web application project was to construct any buttons required in the app using simple anchors rather than using either input or button elements, handling the visual appearance with CSS.

This was a challenging task in some respects due to some cross-browser quirks (what else is new?) and the simple desire to not create excessive code for the sake of nice buttons.

In the end, a smattering of ALA technique and home-brewed trial and error did the trick and allowed a fairly robust and flexible system for constructing buttons while aiding accessibility and ideally making users with screenreaders happy as well.

The main designer/developer benefit is that these buttons are easy to style, can be easily repurposed to allow different styling and allow for translation into other languages without having to produce countless images. They also happen to work based on my testing in IE6/Win, Safari and Firefox. I haven’t done any testing in Opera, but I suspect that they should be fine in newer versions of that browser as well.

Cutting Up Your Buttons

Since this technique is based on Doug Bowman’s Sliding Doors technique , I suggest you give it a brush-up read if necessary. It lays the overall foundation for the sliding door buttons technique.

CSS Sliding Buttons
An example of Sliding door buttons with CSS

The short version is this: we need two images. A left side and a right side. The left side will occupy the space from the left edge of the button text to the left edge of the button background itself. You should get the general idea from the screenshot above.

One key thing to remember is to make the background of the button on the right side wider than you need. The reason for this is to allow the button to expand and contract with the length of the button text and to allow a certain amount of font scaling.

Mark Me Up

The basic markup is as simple as it gets. You need an anchor and a span. It looks a little something like the sample below.

<a href="#" title="My Button"><span>My Button</span></a>

Simple, no? To style the button, you apply the left background image to the anchor and the right background to the span, remove the text-decoration from the links, add some padding to allow the entire button shape to be visible and set the span to display-inline.

The reason for placing the span inside the anchor is simple: doing it the other way around works fine until you get into IE and it all falls apart. Placing the span inside brings the added benefit of ensuring the entire button shape will be clickable by the user.

Code Sample

You can grab a quick sample of the sliding buttons technique in use here.

So say you…

Scott, thanks for the article. I’m sure I’ll use this in a future project. Any chance you could post the images that you are actually using (or even better the PSD files that you created)? Thanks!

DeLynn Berry DeLynn Berry May 9, 2006

Well, you can grab the images from the sample code. I changed the location of those files, so the link should now load in the browser rather than force download. Unfortunately, I can’t provide any layered PSD files for the examples shown.

Scott Scott May 9, 2006

The updated sample page is great. No worries on the PSD files. I’m sure I can whip something up myself. I was just hoping to cut a corner (what can I say, I’m a bit lazy ;-).

DeLynn Berry DeLynn Berry May 10, 2006

hot hot hot. Great idea, I think I’ll have to use it.

Dan Dan May 12, 2006

I’m really into the idea of your buttons but the bottoms of them are clipping sometimes in IE on a box with Windows XP Pro. They look fine in firefox but the bottoms only actually show up about 1/2 the time in IE. Super weird? The problem happens on your sample page online as well as the version I’ve been working on locally.

Have you run into this problem?

Sam Liberto Sam Liberto May 23, 2006

When you get to the bottom you go back to the top of the slide… or check out our B-sides

It’s all interconnected …On A Long Piece Of String

Feeds //

Get social and don’t be a lurker

Elsewhere // Click to view

05