Making beautiful buttons

This tutorial will teach you how to create very nice and convenient text buttons (with a click effect ) using CSS.

Sliding Door Technology

To make our buttons practical, we must consider the possibility of stretching the buttons. For this we will use the technique of "sliding doors" (slidingdoors).
Our button will consist of the main tag a with the span tag embedded in it, each of which contains one of the parts of the background image.
Here is what HTML looks like:

Bring world peace

Very simple, right?
Now, we need to deal with the design of our button in the normal state and in the state of pressing.

Here's what I think:

We will use the same image for both states, simply changing its background-position.
This is how our workpiece looks, taking into account all factors:

Making the button

We issue using the following css code:

.clear {/ * generic container (ie div) for floating buttons * /
    overflow: hidden;
    width: 100%;
}
a.button {
    background: transparent url ('bg_button_a.gif') no-repeat scroll top right;
    color: # 444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; / * sliding doors padding * /
    text-decoration: none;
}
a.button span {
    background: transparent url ('bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}
a.button: active {
    background-position: bottom right;
    color: # 000;
    outline: none; / * hide dotted outline in Firefox * /
}
a.button: active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; / * push text down 1px * /
}

Especially for IE

In Internet Explorer, clicking a button will not work, so let's do a little trick on javascript:

 ... 

Done ^ _ ^

View example
Download example

Source: Chernev.ru - Web mastering in a positive format!