Apr 2 2009

Custom Buttons with CSS

While localizing our Automated Test Database software, we found the need for a better solution for styling buttons. Our requirements were:

  1. Consistent CSS based buttons for both <button> and <a> elements.
  2. Active, hover, primary, and disabled button states.
  3. Compatible and consistently in IE6, IE7, IE8, Firefox, Safari, and Chrome.
  4. Semantic markup.

I found a few blog posts that cover some (or most) of these requirements, but none of them seem to cover them all. Most concentrate on either the button or anchor tag, but not both.

I’ve created a GitHub project — custom_buttons that contains XHTML, CSS, and images for buttons to do it all. There are two different examples — a round button, and a more rectangular button. The code takes advantage of the sliding doors technique so that the button expands to fit the size of the text.

The markup for styling a <button>:

<button type="submit" class="button round_button"><span>Submit</span></button>
<button type="submit" class="button round_button primary"><span>Submit</span></button>
<button type="submit" class="button round_button disabled"><span>Submit</span></button>

And the markup for styling an <a>:

<a href="#" class="button round_button"><span>Submit</span></a>
<a href="#" class="button round_button primary"><span>Submit</span></a>
<a href="#" class="button round_button disabled"><span>Submit</span></a>

The result from both examples:
buttons

In my examples I use the “round_button” and “rect_button” classes to differentiate between multiple button styles that use the same technique. If you only require a single button style, you can probably get away with simplifying the code to just use class="button".

A lot of this code is based on content in the following articles (and their helpful comments):

How to make sexy buttons with CSS
Recreating the button
Rediscovering the button element
Styling the button element with sliding doors

This entry was posted on Thursday, April 2nd, 2009 at 2:51 am. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

10 comments

  • comment by Tiho Lupak 13 Apr 09

    The redering goes mad if one tries to add a simple icon to the button - like it’s usual and requried in many situations

  • comment by derek 19 Apr 09

    I’ve updated the examples on GitHub to show examples using icons with the buttons

  • comment by Tiho Lupak 21 Apr 09

    > I’ve updated the examples on GitHub to show examples using icons with the buttons
    Oh, I see, you put the icon *inside* the SPAN element :). I always used it only for the text, to better position it inside the button :).
    Now there’s only one thing missing: the possibility to scale it’s size, i.e. to display bigger button that stands out from the rest. Of course by adding a bigger icon too (e.g. at various sizes - 32px, 48px, 64px and even 128px) - the rest: size, font, spacing could scale accordingly.

  • comment by derek 21 Apr 09

    You can create larger style buttons by adding a new button class similar to how I have two different styles for the round/rectangle style buttons. It is certainly possible to make the height of the button scale dynamically to the size of the text, but it would require more nested spans in the markup, and more complexity. For the moment I think this works good enough for my needs. Feel free to fork on GitHub if you want to experiment.

  • comment by neki chan 26 May 09

    where’s the code for the class~
    why didn’t display it in the article
    i confuse ><”

  • comment by derek 26 May 09

    The code is all on GitHub. The code includes the markup, css, and images needed to display the buttons. There is a download link on the GitHub page to get a zipfile or tarball of the code.

  • comment by Dan Rivard 12 Jun 09

    I used the same technique from Filament Group. I also modified it a bit to match some css styled links I’m using. I’m seeing an ugly shift of the sliding doors “end-cap” piece in the active/pressed state on IE8 final, and I get the same results in your git hub example. Are there any updated versions of the code? Is any one else seeing this?

  • comment by Dan Rivard 12 Jun 09

    Found a viable solution to the IE8 problem in my previous post.

    http://labs.findsubstance.com/2009/05/21/ie8-form-button-with-background-image-on-click-css-bug/comment-page-1/#comment-750

    The third method, just shifting the active state a little in IE8 only, works for now.

  • comment by Jazza 27 Jun 09

    Hi, the code works terrifically! Only issue I have found is that in IE8 (not sure if it happens in IE7) when a button is clicked (or active) the right hand image appears a little higher than the rest of the buttons images. I’ve uploaded a shot of how it looks here: http://img530.imageshack.us/img530/7418/65450965.png

    Any ideas how I could fix this?

    Thanks :)

  • comment by derek 10 Sep 09

    Thanks Dan. I’ve committed updates to the code for IE8 using the solution in the link you provided.

Post a comment