Making beautiful buttons

Original author: Alex Griffioen
  • Transfer
fdgfd

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:
button-design
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:
bg_button_spanbg_button_a

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!

Also popular now: