![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif) Code 1 <style> 2![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) .btn { 3 BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 4 #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 5 progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 6 StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 7 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 8 BORDER-BOTTOM: #7b9ebd 1px solid 9 } 10![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) .btn1_mouseout { 11 BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 12 #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 13 progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 14 StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 15 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 16 BORDER-BOTTOM: #7EBF4F 1px solid 17 } 18![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) .btn1_mouseover { 19 BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 20 #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 21 progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 22 StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 23 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 24 BORDER-BOTTOM: #7EBF4F 1px solid 25 } 26![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) .btn2 {padding: 2 4 0 27 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;} 28![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) .btn3_mouseout { 29 BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 30 #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 31 progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 32 StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 33 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 34 BORDER-BOTTOM: #2C59AA 1px solid 35 } 36![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) .btn3_mouseover { 37 BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 38 #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 39 progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 40 StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 41 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 42 BORDER-BOTTOM: #2C59AA 1px solid 43 } 44 .btn3_mousedown 45![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) { 46 BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 47 #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 48 progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 49 StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 50 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 51 BORDER-BOTTOM: #FFE400 1px solid 52 } 53![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) .btn3_mouseup { 54 BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 55 #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 56 progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 57 StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 58 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 59 BORDER-BOTTOM: #2C59AA 1px solid 60 } 61![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) .btn_2k3 { 62 BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: 63 #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: 64 progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 65 StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 66 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; 67 BORDER-BOTTOM: #002D96 1px solid 68 } 69![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif) .test { 70 width:200px; 71 } 72![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif) 73 </style> 74![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif) 75 <button class="btn test">Button样式(btn)</button><br/><br/> 76 <button class="btn1_mouseout test">Button样式(btn1_mouseout)</button><br/><br/> 77 <button class="btn1_mouseover test">Button样式(btn1_mouseover)</button><br/><br/> 78 <button class="btn2 test">Button样式(btn2)</button><br/><br/> 79 <button class="btn3_mouseout test">Button样式(btn3_mouseout)</button><br/><br/> 80 <button class="btn3_mouseover test">Button样式(btn3_mouseover)</button><br/><br/> 81 <button class="btn3_mousedown test">Button样式(btn3_mousedown)</button><br/><br/> 82 <button class="btn3_mouseup test">Button样式(btn3_mouseup)</button><br/><br/> 83 <button class="btn_2k3 test">Button样式(btn_2k3)</button><br/><br/> 84 <button class="btn3_mouseout test" onmouseover="this.className='btn3_mouseover test'" onmouseout="this.className='btn3_mouseout test'" onmousedown="this.className='btn3_mousedown test'">Button全功能样式</button><br/><br/> 85![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
|