Styling the button element with sliding doors

While Particle Tree's technique works well, we needed a more flexible solution that accommodated a wider range of styles. We're often designing and developing complex applications with buttons that are styled with background images, background colors, icons, and sometimes a combination of all three. Ideally, our buttons would:

• use the sliding doors method introduced on A List Apart,
• allow us to use HTML text for the button labels so that we could reuse the same button style many times without having to cut unique images for each, and
• do not require JavaScript for form submission or rollovers.

To meet these conditions we developed the following technique — a cross-browser method for styling button elements with sliding doors.

Examples

Each button shown uses the same markup and style — only the label text is different.

Images & Markup

We cut two images for each state, default and hover (4 images total). The first pair form the left side of the button, the second form the right side.

(We'd like to convert these states into two sprites, where the default and hover state for each are burned into a single background image that is repositioned on hover. Initial testing for that idea yielded inconsistent results — if you have any success with this, please drop us a line.)

Button markup consists of a button tag around a span tag, and label text is written into the span. Both tags are necesary to support the two sliding door background images: the button tag's background image is shorter with right corners, and the span's background image is the larger with left corners. We found in our tests that it's best to cut the right image at least as wide as it is tall to avoid gaps between the doors.

And last but not least, the "submitBtn" class is assigned to the button tag (styles for the span tag are assigned with descendant selectors):

<button value="submit" class="submitBtn"><span>Submit</span></button>

CSS

button { 
  border:0; 
  cursor:pointer; 
  font-weight:bold; 
  padding:0 20px 0 0; 
  text-align:center; 
}
button span { 
  position:relative; 
  display:block; 
  white-space:nowrap; 
  padding:0 0 0 20px; 
}

/*blue buttons*/
button.submitBtn { 
  background:url(images/btn_blue_right.gif) right no-repeat; 
  font-size:1.3em; 
}
button.submitBtn span { 
  height:50px; 
  line-height:50px;
  background:url(images/btn_blue_left.gif) left no-repeat;
  color:#fff; 
}
button.submitBtn:hover {
	background:url(images/btn_blue_right_hover.gif) right no-repeat; 
}
button.submitBtn:hover span {
	background:url(images/btn_blue_left_hover.gif) left no-repeat; 
}

CSS for IE 6 and 7

We recommend referencing these in a dedicated IE stylesheet using conditional comments.

button { 
  width:auto; 
  overflow:visible; 
}
button span { 
  margin-top:1px; 
}

Supported Browsers

So far we've tested: IE 6, IE7, Firefox (Mac + PC), Safari, Opera, Camino

Caveats

IE 6 does not support the ":hover" pseudoclass on elements other than anchor tags. To get the hover to work in IE6, you'll need to duplicate the :hover styles and assign them a class name, and then script a function to toggle that class on/off.

Credits

This technique was motivated by the Particle Tree article Rediscovering The Button Element. The "width: auto;" workaround for IE is a technique we discovered at Jehia.cz.