How to create interesting buttons with css (latest translation)

Sliding Door

To make the buttons flexible, we must make the background image automatically adapt to the text width of the buttons. To this end, we need to use the sliding door technology, combine two background images into one background image. The button uses the tag and span tag. They use different parts of the background image, and the html code is as follows:

<A class = "button" href = "#"> <span> search </span> </a>

Nothing extraordinary happens, right? We need to design simple and clear buttons. The following is my idea:

 

Each graph contains two statuses of the button: normal and pressed. We arrange the two statuses of images in an alternating vertical manner. This css technique can be used without any javascript script to complete the changes. Next we will use the sliding door technology to make the button adaptive to the width of the text, we make the image wider, such as 300px and 24px:

Span

 

Button style

Finally, we will use css to integrate all of this:

A. button {
Background: transparent url (''images/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;
Text-decoration: none;
}

A. button span {
Background: transparent url (''images/bg_button_span.gif '') no-repeat;
Display: block;
Line-height: 14px;
Padding: 5px 0 5px 18px;
}