Custom Buttons 3.0 (demo)

Updated: 27 Feb 2008

This doc attempts to show how custom buttoms with a 1px radius could be created without corner images. The gradient requires an image, but is optional. Ideally, the <button> element should be used if possible (instead of <a>) for semantic and accessibility reasons. Note that the hover state will not work on button elements for IE6 and lower without using JavaScript to detect a mouseOver event.

button  <a>

 <button>

longer button text  <a>

 <button>

    <button> <button> <button>

   <button class="primary"> <button>

 <button class="pill-l"><button class="pill-c"><button class="pill-r">

Reasons for 2 nested spans:

  1. The inner span creates the top and bottom borders. Because button and a are inline elements, top/bottom borders and padding do not affect the height of parent elements (such as the outer span). So with the same top/bottom padding of both span elements, the left/right borders of the outer span stop short of the top/bottom borders of the inner span.
  2. The outer span is necessary to fix bugs in Gecko-based browsers and in IE (separate issues for both). Gecko browsers add an extra 3px of padding inside button elements which can't be eliminated. Without the outer span, top/bottom and left/right borders wouldn't connect. IE just has trouble styling buttons and nested elements inside them, so the majority of visible styles are applied to two inner spans.