Apr 2 2009

Custom Buttons with CSS
15

Update: I have added another project on GitHub for styling buttons using CSS that supports IE9+. It is preferred to this method if you don’t need support for older versions of ie.

While localizing software, I found the need for a better solution for styling buttons. My 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 large_button"><span>Submit</span></button>
<button type="submit" class="button large_button primary"><span>Submit</span></button>
<button type="submit" class="button large_button disabled"><span>Submit</span></button>

And the markup for styling an <a>:

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

The result from both examples:

In my examples I use the “large_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

15 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.

  • comment by Pip 24 Dec 09

    Awesome work! It’s a pleasure to find something that really does just drop in and work in all browsers.

  • comment by somei 12 Dec 10

    Hi, everything is fine. But does not work in opera – there is a shift button, when clicked on it.
    Is it possible to fix this?

  • comment by peter 12 Nov 11

    I tried the css from git on Firefox 7 and actual webkit browsers (Android) and IE. When using the button without the link, ist nice, also inserting images works fine.
    But If I use the button with the element, the end cap is missing. What can I do to solve this?

  • comment by peter 12 Nov 11

    I wanted to say: But If I use the button with the “a” element, the end cap is missing. What can I do to solve this?

  • comment by m 18 Mar 12

    so where are html buttons included in this blog post? i have to download and test from github :/

Sorry, the comment form is closed at this time.