How to make even more sexy buttons with CSS

This modified tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state and hover state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day. Here's what you'll get:

Making the sexy button

For background information please visit the original post by Alex Griffoen

Our button will be a basic <a> tag with a nested <span>, each containing a different slice of the background image. Here's what the HTML looks like:

<a class="button" href="#"><span>Bring world peace</span></a>

Nothing out of the ordinary, right? Next, we need to come up with a crisp design for our button in both normal and pressed state. Here's what I'm thinking:

We will include all states in a single image. To switch between the states, we'll simply shift the background image vertically, revealing the alternate states. This CSS based approach allows us to perform the switch without the need for any JavaScript trickery. Let's merge these two and apply the sliding doors cut. The part of the image that will accomodate the button text will be set to a reasonable 300px. The height we'll set to 24px.

Button styling modifications

After bringing it together with CSS as Alex described we need to update the css to make sure we will have the hover effect.

This can be done by adding the :hover to the button, which will look like:

a.button:hover {
    background-position: center right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:hover span {
    background-position: center left;
}

If you compare with the :active selector, you will see that I have removed the padding for the span, because we do not want the text to move when we hover. It is also important that the :active background selector should get !important added or the active state link will not work. This due to the fact that otherwise the hover will overrule it. By issuing an !important property to the :active properties we will make sure that these will not be overruled.

All done! Go ahead. Hover and Click 'em!

To submit forms with this type of button, simply add more calls to the button's onclick event.
Or if you use jQuery you can use the click event.

Feedbacks are welcome!

Hopefully you enjoyed this modification. You can always contact me for suggestions or remarks. As mentioned, all credits should go for Alex Griffoen. I just improved it

Remember to relax sometime!

– Oguz