Webpage instance: use CSS to create a webpage button with a style

Today, I redesigned the buttons made by the previous designer on the company's platform. Originally, he used JavaScript to achieve alternate image changes. However, the disadvantages are: it occupies the ID attribute in input, and disabled cannot be used, which is not conducive to program design and production.
The idea of button re-creation:
1. Differences between trigger and non-trigger;
2. Applicable to input and;
3. There is no difference between different browsers.
Button re-creation process:
1. Use different styles to achieve the difference between triggering and not triggering;
2. Use boder to simulate button shadow
The following code is normal in IE6, IE7, and FF!
CSS section:

The code is as follows:

Copy code

. Button-style01 { Color: #5E7384; Font-weight: bold; Background: # CBDBE5; Border-top: 1px solid # f1f1f1; Border-left: 1px solid # f1f1f1; Border-right: 2px solid #666; Border-bottom: 2px solid #666; Height: 25px } . Button-style02 { Color: # fff; Font-weight: bold; Background: # 859BAB; Border: 1px solid # f1f1f1; Border-top: 1px solid # f1f1f1; Border-left: 1px solid # f1f1f1; Border-right: 2px solid #666; Border-bottom: 2px solid #666; Height: 25px } A. Button-style01, a. Button-style02 { Display: block; Height: 22px; Line-height: 22px; Vertical-align: middle; Padding: 0px 8px; } A. Button-style01: link, a. Button-style01: visited { Text-decoration: none; Color: #5E7384; Border-top: 1px solid # f1f1f1; Border-left: 1px solid # f1f1f1; Border-right: 2px solid #666; Border-bottom: 2px solid #666; }   A. Button-style02: hover, a. Button-style02: active { Text-decoration: none; Color: # fff; Border-top: 1px solid # f1f1f1; Border-left: 1px solid # f1f1f1; Border-right: 2px solid #333; Border-bottom: 2px solid #333; } Xhtml section: <Input type = "submit" name = "login" id = "login" onclick = "myoffice. submit () "value =" Sign in "onmouseover =" this. className = 'Button-style02' "onmouseout =" this. className = 'Button-style01' "class =" button-style01 "style =" width: 70px; "/> <A href = "#" onmouseover = "this. className = 'Button-style02' "onmouseout =" this. className = 'Button-style01' "class =" button-style01 "> Join Free </a>