幾個CSS按鈕樣式

來源:互聯網
上載者:User
幾個CSS按鈕樣式
<style><br />.btn {<br />BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:<br />#7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:<br />progid:DXImageTransform.Microsoft.Gradient(GradientType=0,<br />StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd<br />1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px;<br />BORDER-BOTTOM: #7b9ebd 1px solid<br />}<br />.btn1_mouseout {<br />BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:<br />#7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:<br />progid:DXImageTransform.Microsoft.Gradient(GradientType=0,<br />StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F<br />1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px;<br />BORDER-BOTTOM: #7EBF4F 1px solid<br />}<br />.btn1_mouseover {<br />BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:<br />#7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:<br />progid:DXImageTransform.Microsoft.Gradient(GradientType=0,<br />StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F<br />1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px;<br />BORDER-BOTTOM: #7EBF4F 1px solid<br />}<br />.btn2 {padding: 2 4 0<br />4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}<br />.btn3_mouseout {<br />BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:<br />#2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:<br />progid:DXImageTransform.Microsoft.Gradient(GradientType=0,<br />StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA<br />1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px;<br />BORDER-BOTTOM: #2C59AA 1px solid<br />}<br />.btn3_mouseover {<br />BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:<br />#2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:<br />progid:DXImageTransform.Microsoft.Gradient(GradientType=0,<br />StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA<br />1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px;<br />BORDER-BOTTOM: #2C59AA 1px solid<br />}<br />.btn3_mousedown<br />{<br />BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:<br />#FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:<br />progid:DXImageTransform.Microsoft.Gradient(GradientType=0,<br />StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400<br />1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px;<br />BORDER-BOTTOM: #FFE400 1px solid<br />}<br />.btn3_mouseup {<br />BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:<br />#2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:<br />progid:DXImageTransform.Microsoft.Gradient(GradientType=0,<br />StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA<br />1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px;<br />BORDER-BOTTOM: #2C59AA 1px solid<br />}<br />.btn_2k3 {<br />BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:<br />#002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:<br />progid:DXImageTransform.Microsoft.Gradient(GradientType=0,<br />StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96<br />1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px;<br />BORDER-BOTTOM: #002D96 1px solid<br />}<br /></style><br /><body><br /><button class=btn> Button</button><P></p><br /><button<br />class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"<br />onmouseout="this.className='btn1_mouseout'"<br />> Button</button><br /><button<br />class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"<br />onmouseout="this.className='btn1_mouseout'" DISABLED<br />>Button</button><br /><P><br /><button class=btn2>Button</button><br /><P><br /><button class=btn3_mouseout<br />onmouseover="this.className='btn3_mouseover'"<br />onmouseout="this.className='btn3_mouseout'"<br />onmousedown="this.className='btn3_mousedown'"<br />onmouseup="this.className='btn3_mouseup'" onclick="this.blur();"<br />> Button</button><br /><P><br /><button class=btn_2k3>2k3 Button</button><br /></body><br />

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.