Accessible buttons

In my job I am sometimes faced with the daunting task of making a seemingly impossible design be both accessible and the text translatable. That means things need to expand horizontally and vertically. Buttons have been a particular challenge. Frequently designers want rounded corners, inside and outside borders, and nice gradient background image and the ability to put an image along with the text on the button. And drop shadows. HTML buttons don’t allow for as many styling options as making a link look like a button. And sure, there is code bouncing around on the web that makes a button that will expand but it uses tons of divs. Me, I like to keep my code lean. So….with a little compromise, here’s a good technique for making buttons.

1. You use a span tag around a link tag. If you want a drop shadow, you add one more wrapping span tag. The outermost span has a display style of table, so it is only as wide as is necessary, but behaves like a block level element. Your innermost span and/or link have a display of block so they fill the outer element.
2. You offset the button from the drop shadow using position:relative and negative top and left values.
3. You round the corners in Safari using -webkit-border-radius. Ideally you could do this in Firefox, too, using -moz-border-radius and -moz-background-clip, but the buttons I was playing with looked better kept square. Maybe with different colors you could get away with it.
4. You put an outside border on the button span and change its color on hover.
5. You put an inside border on the link.
6. You put button text and an optional image inside the link
7. To make the buttons appear inline, you need to float them or put them in individual table cells.

You can see an example of these buttons, here, and view the source code to see how they were created. There are also some matching styles for an input type=”button” version of the button (you don’t get the inner border).

This is what a drop-shadow button looks like in Safari:

This is what it looks like in the other browsers:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s