1<html>
2<head>
3<title> 几个漂亮Button的CSS </title>
4<style>
5.btn {
6BORDER-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
7}
8.btn1_mouseout {
9BORDER-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
10}
11.btn1_mouseover {
12BORDER-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
13}
14.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
15.btn3_mouseout {
16BORDER-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
17}
18.btn3_mouseover {
19BORDER-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
20}
21.btn3_mousedown
22{
23BORDER-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
24}
25.btn3_mouseup {
26BORDER-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
27}
28.btn_2k3 {
29BORDER-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
30}
31</style>
32</head>
33<body>
34<h2>几个漂亮Button的CSS</h2>
35除了CSDN的和e商2003的，其他皆为JoeCom原创按钮
36转摘请注明出处 <a href=" http://blog.csdn.net/juwuyi " target="_blank">http://blog.csdn.net/juwuyi</a><br/>
37<button class="btn" title="这是CSDN的官方按钮"> 好看的CSDN Button</button><p></p>
38<button "="" blog.csdn.net="" class="btn1_mouseout" http:="" juwuyi="" onmouseout="this.className='btn1_mouseout'" onmouseover="this.className='btn1_mouseover'" target="_blank" title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:<a href=">http://blog.csdn.net/juwuyi"
39> 好看的Green Button</button>
40<button class="btn1_mouseout" disabled="" onmouseout="this.className='btn1_mouseout'" onmouseover="this.className='btn1_mouseover'"> 好看的Green Button</button>
41<p>
42<button class="btn2" title="这是e商2003的官方按钮"> 好看的 e商2003 Button</button>
43<p>
44<button "="" blog.csdn.net="" class="btn3_mouseout" http:="" juwuyi="" onmousedown="this.className='btn3_mousedown'" onmouseout="this.className='btn3_mouseout'" onmouseover="this.className='btn3_mouseover'" onmouseup="this.className='btn3_mouseup'" target="_blank" title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:<a href=">http://blog.csdn.net/juwuyi"
45> 好看的QQ Button</button>
46<p>
47<button "="" blog.csdn.net="" class="btn_2k3" http:="" juwuyi="" target="_blank" title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:<a href=">http://blog.csdn.net/juwuyi"> 好看的 2k3 Button</button>
48</p></p></p></body>
49</html>
几个漂亮Button的CSS
comments powered by Disqus