Shulou(Shulou.com)06/03 Report--

A refreshing button button style, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

The effect is as follows:

The code is as follows:

.clear {/ * generic container (i.e. Div) for floating buttons * /

Overflow: hidden

Width: 100%

}

A.button {

Background: transparent url ('IMG/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 ('IMG/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 * /

}

Button

Here are two pictures under the IMG folder:

Bg_button_a:

Bg_button_span:

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.