几个CSS按钮样式

Button

ButtonButton

Button

Button

2k3 Button

 1 
 2 <STYLE>
 3             .btn {
 4              BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 
 5             #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 
 6             progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
 7             StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 
 8             1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 
 9             BORDER-BOTTOM: #7b9ebd 1px solid
10             }
11             .btn1_mouseout {
12              BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 
13             #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 
14             progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
15             StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 
16             1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 
17             BORDER-BOTTOM: #7EBF4F 1px solid
18             } 
19             .btn1_mouseover {
20              BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 
21             #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 
22             progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
23             StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 
24             1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 
25             BORDER-BOTTOM: #7EBF4F 1px solid
26             } 
27             .btn2 {padding: 2 4 0 
28             4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
29             .btn3_mouseout {
30              BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 
31             #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 
32             progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
33             StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 
34             1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 
35             BORDER-BOTTOM: #2C59AA 1px solid
36             } 
37             .btn3_mouseover {
38              BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 
39             #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 
40             progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
41             StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 
42             1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 
43             BORDER-BOTTOM: #2C59AA 1px solid
44             }
45             .btn3_mousedown
46             {
47              BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 
48             #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 
49             progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
50             StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 
51             1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 
52             BORDER-BOTTOM: #FFE400 1px solid
53             } 
54             .btn3_mouseup {
55              BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 
56             #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 
57             progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
58             StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 
59             1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 
60             BORDER-BOTTOM: #2C59AA 1px solid
61             } 
62             .btn_2k3 {
63              BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 
64             #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 
65             progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
66             StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 
67             1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 
68             BORDER-BOTTOM: #002D96 1px solid
69             }
70             </STYLE>
71 <BUTTON class=btn>Button</BUTTON>
72 <P></P><BUTTON class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'">Button</BUTTON><BUTTON class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" disabled onmouseout="this.className='btn1_mouseout'">Button</BUTTON> 
73 <P><BUTTON class=btn2>Button</BUTTON> 
74 <P><BUTTON onmouseup="this.className='btn3_mouseup'" class=btn3_mouseout onmousedown="this.className='btn3_mousedown'" onmouseover="this.className='btn3_mouseover'" onclick=this.blur(); onmouseout="this.className='btn3_mouseout'">Button</BUTTON> 
75 <P><BUTTON class=btn_2k3>2k3 Button</BUTTON> </P>