几款经典漂亮按钮的css式样

来源：互联网发布：浏览器比价软件编辑：程序博客网时间：2024/04/27 22:19

<mce:style></mce:style><style mce_bogus="1">.btn{ border-right: #7b9ebd 1px solid; padding-right: 2px; border-top: #7b9ebd 1px solid; padding-left: 2px; font-size: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); border-left: #7b9ebd 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #7b9ebd 1px solid;}.btn1_mouseout{ border-right: #7EBF4F 1px solid; padding-right: 2px; border-top: #7EBF4F 1px solid; padding-left: 2px; font-size: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); border-left: #7EBF4F 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #7EBF4F 1px solid;}.btn1_mouseover{ border-right: #7EBF4F 1px solid; padding-right: 2px; border-top: #7EBF4F 1px solid; padding-left: 2px; font-size: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); border-left: #7EBF4F 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #7EBF4F 1px solid;}.btn2{ padding: 2 4 0 4; font-size: 12px; height: 23; background-color: #ece9d8; border-width: 1;}.btn3_mouseout{ border-right: #2C59AA 1px solid; padding-right: 2px; border-top: #2C59AA 1px solid; padding-left: 2px; font-size: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); border-left: #2C59AA 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #2C59AA 1px solid;}.btn3_mouseover{ border-right: #2C59AA 1px solid; padding-right: 2px; border-top: #2C59AA 1px solid; padding-left: 2px; font-size: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); border-left: #2C59AA 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #2C59AA 1px solid;}.btn3_mousedown{ border-right: #FFE400 1px solid; padding-right: 2px; border-top: #FFE400 1px solid; padding-left: 2px; font-size: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); border-left: #FFE400 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #FFE400 1px solid;}.btn3_mouseup{ border-right: #2C59AA 1px solid; padding-right: 2px; border-top: #2C59AA 1px solid; padding-left: 2px; font-size: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); border-left: #2C59AA 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #2C59AA 1px solid;}.btn_2k3{ border-right: #002D96 1px solid; padding-right: 2px; border-top: #002D96 1px solid; padding-left: 2px; font-size: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); border-left: #002D96 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #002D96 1px solid;}</style><button class="btn" title="好看的按钮">好看的按钮</button><p></p><button class="btn1_mouseout" onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'" title="好看的按钮">好看的按钮</button><button class="btn1_mouseout" onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'" disabled>好看的按钮</button><p> <button class="btn2" title="好看的按钮">好看的按钮</button><p> <button class="btn3_mouseout" onmouseover="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'" onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" title="好看的按钮">好看的按钮</button><p> <button class="btn_2k3" title="好看的按钮">好看的按钮</button>