The previous week when I was stumble upon and I found a great example how you can create a nice form button with round corners using the BUTTON element. Of course I think it can be improved giving more value.

The tutorial starts by comparing the INPUT type=”submit” element and BUTTON element. The most interesting difference is that the BUTTON element may have content. So, the goal is to create and style a nice web 2.0 button that can be resizeable so there is no need for later interventions. The button element will be treat as container and we will add some markup.

You can see in the demo that I used the button in different combinations, that I know that is good for integration & usability.

What we need?

We need a 670px wide .GIF image that has all the states that we want: active, hover, disabled and a second action
One mention is that the example doesn’t support transparent backgrounds. The image is part of the tutorial zip file together with the .PSD source file, so you can change the colors as you wish.

The HTML

As I said we will treat the button element as a container:

<button><span><em>Button text</em></span></button>

In the example that I use as source for this tutorial the developer said and I agree that we need two child elements instead of only one because there are some paddings that button preserved that we could not remove.

The CSS

We apply the image as a background of a top element (in this case SPAN), place it to top left and add some left padding. Nested element (in this case EM) have the same background image but placed to top right and with right padding. As the content text grows so will the button.

Height of the button is fixed in my example 36px but this can be changed. To make sure that the text is vertically centered I use line-height property.

Here is the css for the main button style :

button {
        border:none;
        background:none;
        padding:0;
        margin:0;
        font:90% Arial, Helvetica, sans-serif;
        width:auto;
        overflow:visible;
        text-align:center;
        vertical-align:middle;
        white-space:nowrap;
        height:36px;
        cursor:pointer;
}

button span, button em {
        display:block;
        height:34px;
        line-height:34px;
        margin:0;
        color:#333333;
}

button span {
        padding-left:20px;
        background:url(bg_button.gif) no-repeat 0 0;
}

button em {
        font-style:normal;
        padding-right:20px;
        background:url(bg_button.gif) no-repeat 100% 0;
}

I add a second class=”first” for button in case you want to make a visual difference between two actions:

button.first span {
        padding-left:20px;
        background:url(bg_button.gif) no-repeat 0 -102px;
}

button.first em {
        font-style:normal;
        padding-right:20px;
        background:url(bg_button.gif) no-repeat 100% -102px;
}

Then, I add the mouse over effect and for IE6 I create a .over class:

button:hover span, button.over span {
        padding-left:20px;
        background:url(bg_button.gif) no-repeat 0 -34px;
}

button:hover em, button.over em {
        font-style:normal;
        padding-right:20px;
        background:url(bg_button.gif) no-repeat 100% -34px;
}

Of course the disabled state:

button.disabled { cursor:text; }
button.disabled span, button.disabled em { color:#999999; }
button.disabled span {
        padding-left:20px;
        background:url(bg_button.gif) no-repeat 0 -68px;
}
button.disabled em {
        font-style:normal;
        padding-right:20px;
        background:url(bg_button.gif) no-repeat 100% -68px;
}

And the end some magic css-hacks for IE6 and IE7, to have some space after the buttons.

/* IE hacks to add some space between buttons */
* html button { margin-right:5px; }
*+html button { margin-right:5px; }

I think that’s it! Simple and nice.

You see demo of the buttons or download the zip file that contains the image and the above css.

I also would like some feedback on the work so don’t hesitate to put a comment. :)

1. ivo on March 10th, 2008 at 1:34 am

   great tutorial!
2. Nate Westheimer on March 13th, 2008 at 5:51 pm

   Looks pretty cool, Cristian!
3. Thorri on March 14th, 2008 at 5:28 pm

   Thank you! I’ve implemented your button on perlan.is > pictures. It made a lot of difference to the overall feel.

   Thanks again.
4. Thorri on March 17th, 2008 at 2:52 pm

   …that said, the links I’ve put on the buttons don’t work in IE7 or IE6. The “a href” is outside “button”, looking like this (with default text in the URL):

   Button text

   I’m sure this has nothing to do with your code — still I’m hoping you’d know what to do. Possibly helping others with the same problem :)
5. Thorri on March 17th, 2008 at 2:56 pm

   :$

   I didn’t expect the HTML to be rendered above. Here I’ve exchanged “(/span)(/button)(/a)
   (/div)
6. Thorri on March 17th, 2008 at 2:57 pm

   Oh, my… sorry for the comment overload. I can’t get a handle on how to display HTML in the comments.

   I’ll stop now.
7. admin on March 17th, 2008 at 3:02 pm

   You have to use BUTTON tag, and add onclick=”document.location=’your_link_here’”
   I haven’t tested with A tag, but I will.
8. Naseer Ahmad Mughal on July 11th, 2008 at 1:12 pm

   Great tutorial – two thumbs up…

   Keep it up….
9. Maurice on July 19th, 2008 at 5:27 pm

   Your code is great. I am really liking the options. One question I have is have do you see an easy way to make a column of these buttons a fixed width with the text centered in the buttons? That would make this very useful for vertical button bars.

   Thanks, Maurice
10. Maurice on July 20th, 2008 at 7:05 pm

    Never mind my last question. I fixed their width and they stack beautifully. The only issue I seem to have now is that I cannot get them to link in IE6.

    
    Custom Banners

    They won’t link no way no how in IE6. Anyone have any ideas?
11. Safari 3.0 & Google Chrome hack | Candes | Cristian Neagu - UI Designer, Developer, Consultant on February 27th, 2009 at 11:57 am

    [...] the buttons. They are very fancy, with icon and glow effect so I’m implenting them using the full-button-resize technique that I described in a previous post. Everything is going ok but I have some problems with Safari, [...]
12. ignatus zuk on March 4th, 2009 at 1:55 pm

    woo i learned something here today c:

    this:hover h4 {}

    thanks i didn’t think this was possible with css :P
13. gizm0bill on May 14th, 2009 at 5:05 pm

    it has a little bug in firefox, doesn’t quite extend to the given width, it’s like span and em still have margins.. add border to button so you can see what i mean :)
    i’m trying to do something about it as we speak.. catch’a later
14. Max.W on September 22nd, 2009 at 11:21 pm

    Nice demo, this is very useful.