CSS Snippet Tutorial - Putting Images On Buttons

So, about those standard browser form buttons - kind of boring, aren't they? All grey and flat (although if your lucky, your browser might even give you some gradients). You know the ones I'm talking about - the buttons that you get by writing html like:
<input type="button" value="I'm a Button!" />.

That code makes a button like:

And while it is a perfectly functional button, wheres the spice? Wheres the pizazz!?

That is what we are going to be talking about today - how to spice up those boring form buttons. Did you know that most css styles can actually be applied to things like a button? I bet you thought it was a built in component that really couldn't be changed at all - nothing could be further from the truth. You can do all the stuff to a button that you can do to other html elements - set fonts, colors, background colors, and my favorite, set background images (which is why this tutorial is named "Putting Images On Buttons")!

Ok, let's dive right in. First off, some simple font work:

And that makes a button like:

So that all works as expected. You probably guessed that setting font stuff would work - after all, it is just plain old text on the button.

Now let's take a look at what playing with the borders will do:

Using that code, we get a button that looks like:

So we do get a 1 pixel green border, but did you notice what we lost? We lost a lot of the button effect - because we lost the 3D look of the border that the button used to have. But guess what? That is because we killed the 3D styling. If instead, we used this code:

We get that 3D look back (or at least in most browsers we get the 3D look back - IE6 doesn't really help us out here):

And the reason we got that style back is because we were no longer explicitly setting the border style to solid. Without us explicitly setting it, the border uses the style inset when the button is pressed, and outset when the button is not pressed.

You may have noticed we have been losing something else when playing around with this border stuff - we lost the gradient background of the button. Sadly, pretty much anything that you do to the background or border of a button will kill that gradient - but sometimes it is worth losing that gradient to fit the button to the style of your page.

Ok, let's move on to some background work:

This gives us an awesome button like:

Man, thats an ugly button! But it shows that we can set background color. This means you could combine background color and border color and do some serious styling.

However, the interesting stuff you can do with backgrounds is not color, but setting background images. This is how you can get an image into a button. For instance, take a look at the following code:

We are taking an image of a green checkmark and setting it as the background image (at the position 4,2). We are also setting the background-repeat to no repeat, so that the image appears only once. The other thing we do here is set padding left - this moves the text to the right of where the image will be, and in this case we need to move it 17 pixels to the right. All of this give you this quite nice button:

The major downside is that IE6 does not seem to support this, which is really kind of sad. Of course, if you don't care about IE6, and you don't mind losing the gradient on your buttons, doing this allows you to have some awesome "OK" and "Cancel" buttons on a form somewhere:

So that's it for styling buttons. If anyone has any comments or questions (or ideas on how to get this type of thing to work in IE6), leave them below.