Making beautiful buttons

This tutorial will teach you how to create very nice and comfortable text buttons (with the effect of pressing ) using CSS.


')

Sliding door technology

To make our buttons practical, we need to consider the possibility of button stretching. To do this, we will use the slidingdoors technique.
Our button will consist of a main tag a with a span tag nested in it, each of which contains one of the parts of the wallpaper.
Here is what HTML looks like:

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

Very simple, isn't it?
Now, we need to deal with the design of our button in a normal state and in a state of pressing.

That's what I think:

We will use one image for both states, just changing its background-position.
This is what our stock looks like taking into account all factors:

We make a button

We make out with 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, pressing a button will not work, so let's do a little javascript trick:

  <a class="button" href="#" onclick="this.blur();"> <span> ... </ span> </a> 

Done ^ _ ^

See an example
Download an example

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