Particle Tree recently posted an article describing a technique for styling the HTML button element. For those not familiar, form buttons are notoriously difficult to customize because they render differently across browsers and platforms. The typical solutions are to use the default button style that the browser provides, or use an image input, which may look fine but requires that you create a unique background image with text “baked in” for each type of button (i.e., “Enter”, “Send message”) and its rollover state.

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.

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 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;
}

Demo: http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/

Source: http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/

Related Listings:

1. Make Sexy Buttons with CSS This tutorial will teach you how to create pretty looking...
2. Scalable Css buttons Script There has been a lot of talk about CSS buttons...
3. Skype-like buttons using jQuery If you use Skype I am sure that you noticed...
4. Custom HTML Buttons and Form Elements Have you ever wanted to use your own images for...
5. Styling inputs with Css and Dom File inputs (< input type= "file" />) are the bane...

Do you like this post?

Email: