2007年8月20日 @ 16:15

几个漂亮Button的CSS

来源于Joecom'sblog：http://blog.csdn.net/juwuyi
效果不错，值得参考！
注：仅在IE下有效。

HTML 代码：

<HTML><br/>    <HEAD><br/>    <TITLE> 几个漂亮Button的CSS </TITLE><br/>    <style><br/>    .btn {<br/>    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<br/>    }<br/>    .btn1_mouseout {<br/>    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<br/>    }<br/>    .btn1_mouseover {<br/>    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<br/>    }<br/>    .btn2 {padding: 2 4 0 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: #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<br/>    }<br/>    .btn3_mouseover {<br/>    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<br/>    }<br/>    .btn3_mousedown<br/>    {<br/>    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<br/>    }<br/>    .btn3_mouseup {<br/>    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<br/>    }<br/>    .btn_2k3 {<br/>    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<br/>    }<br/>    </style><br/>    </HEAD><br/>    <BODY><br/>    <h2>几个漂亮Button的CSS</h2><br/>    除了CSDN的和e商2003的，其他皆为JoeCom原创按钮<br/>    转摘请注明出处 blog.csdn.net/juwuyi<BR><br/>    <button class=btn title="这是CSDN的官方按钮"> 好看的CSDN Button</button><P></p><br/>    <button<br/>    class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"<br/>    onmouseout="this.className='btn1_mouseout'"<br/>    title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:blog.csdn.net/juwuyi"<br/>    > 好看的Green Button</button>  &nbsp;<br/>    <button<br/>    class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"<br/>    onmouseout="this.className='btn1_mouseout'" DISABLED<br/>    > 好看的Green Button</button><br/>    <P><br/>    <button class=btn2 title="这是e商2003的官方按钮"> 好看的 e商2003 Button</button><br/>    <P><br/>    <button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"<br/>    onmouseout="this.className='btn3_mouseout'"<br/>    onmousedown="this.className='btn3_mousedown'"<br/>    onmouseup="this.className='btn3_mouseup'"<br/>    title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:blog.csdn.net/juwuyi"<br/>    > 好看的QQ Button</button><br/>    <P><br/>    <button class=btn_2k3 title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:blog.csdn.net/juwuyi"> 好看的 2k3 Button</button><br/>    </BODY><br/>    </HTML><br/>

Filed under：资料 · Tags: css

Articles related:

◎welcome to give out your point。

Navigation

Previous

Archives

2007年8月20日 @ 16:15

几个漂亮Button的CSS

Articles related:

Leave a Comment

Misc

Linkage