Website Div CSS button effect Design

After the website is re-designed with Div CSS, the speed and aesthetics will be improved, but the compatibility test must be completed.
When the DIV design button is used, it is more effective and simple. Website Div CSS, even if you are not using the whole site, the local effect is good.

Here is a method to explain the button effect. If you use it flexibly, the button designed by the div css website will make your site more colorful.

First read from www.cunbuluo.com
A style sheet intercepted in (village tribe:

# Prolist {letter-Spacing: 2px; font-size: 14px; font-weight: bold}
# Prolist ul {margin: 0px; padding: 0px}
# Prolist Li {Height: 35px; line-Height: 35px; Background: URL (images/pro_bg.gif) center no-Repeat; margin: 4px 0px 4px 0px}
# Prolist Li a {display: block; width: 165px}
# Prolist Li A: link {color: # dd0000; text-Decoration: none ;}
# Prolist Li A: visited {text-Decoration: none; color: # dd0000 ;}
# Prolist Li A: hover {text-Decoration: underline; color: # ff0000; Background: URL (images/pro_bg2.gif) center no-Repeat ;}
# Prolist Li A: active {text-Decoration: none; color: # dd0000 ;}

Note the relationship between each level of Div CSS elements. Pay attention to the red part, which is the main style sheet for implementing the button effect. The display: Block in # prolist Li a {display: block; width: 165px} must be set. Otherwise, the effect of switching the background is not obvious. In this way, use Div CSS to design the switch effect of the button background.

You can also change the hover style to # prolist Li A: hover {text-Decoration: underline; color: # ff0000; Background: URL (images/pro_bg2.gif) center no-Repeat; position: relative; left: 1px; top: 1px. After setting the background, the entire button will experience a decline.