[Post] How to Use CSS to create a beautiful button

[Post] How to Use CSS to create a beautiful button

Address: http://parandroid.com/how-to-use-css-to-create-a-beautiful-button/

This tutorial will teach you how to use CSS to create a beautiful Dynamic Button. The so-called dynamic means that the default status is different from the background button image in the focused status, let's take a look at how this is done:

Sliding Door

Because we want our buttons to be flexible, we will make the background image, and the text can be changed automatically. In this regard, we use our beloved sliding door technology. The illusion created by two complementary images is one default and one click.

Our buttons will be a basic label nested <A> and <span>, and different background images will be specified for each layer. Below is the htmlCode:

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

Next, we need two clear background images, which are used in the default and focus statuses respectively:

We will use the two images below CSS to achieve the Changing Effect of buttons without using any JavaScript. Set a reasonable height and width for the background image. For example, we set the width to 300px and the height to 24px.

The following are the background images of sums.
Span

A

Style button

Finally, we need a CSS to style the buttons so that they are all associated. In this process, we need to add the span and a elements to the floating attribute. Therefore, we need to clear the floating of the entire style:


. Clear {
/* Generic container (I. e. 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;
}


We now have a beautiful button, but it has not yet achieved the conversion effect required for focusing. Therefore, we also need to add:


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 */
}


OK. However, you must note that the preceding method cannot run normally in IE. Therefore, to make it work on IE, you need to use the following in tag:

<A href = "#" onclick = "This. Blur ();" class = "button">... </A>

The translation is not very smooth. I have explained it in my own words. If you do not understand the above information, click here to view the original English document Tutorial: How to make sexy buttons with CSS.