几款很漂亮的CSS控制的按钮样式

踏浪行歌 · 发表于 2008-9-2 11:03:35

登录后查才能浏览下载更多咨询，有问题联系QQ：3283999

您需要登录才可以下载或查看，没有账号？入住遨海湾

×

找了几个用CSS控制的按钮，配色也很漂亮，修改起来也比较简单，所以整理了一下放上来。
希望大家能够喜欢！

<style> , T$ }, c- r; s2 \! ^6 ?
.btn {. G) P3 X: ^8 E9 ^* P2 c
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 solid3 d+ V2 _0 Z' y1 U# y5 T
}: S2 n& T1 z5 a( Y6 o3 a7 F
.btn1_mouseout {/ \1 @7 H" Q9 [, T/ D5 f
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 solid9 K ~: \# ~8 M1 I( D0 \
}% P1 T# G2 A9 k6 @6 D4 z
.btn1_mouseover { ) J3 i; h8 N5 e' @) ]
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% |' J- T2 X1 b9 f- i
}& O7 ~- p7 o7 j" D m
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}( E: @" N; x$ Z3 z0 {
.btn3_mouseout {& _ v$ O" N( r! @$ w; H# r- _
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 + n" Z6 b* S9 S" _
}' Y( i x9 J$ f& @9 L$ L- K K
.btn3_mouseover { ) ?2 I u' U4 }
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 " E$ l* {3 A0 \) F9 f; X
} % n- `) C" \( r" G& F2 ]' k
.btn3_mousedown 6 y$ L) U8 k# _# W* X* D
{ 6 a) f: f* R3 c3 l! N
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 solid2 c/ u, c7 k& j6 }1 V
} 7 ]8 {: \2 |/ x/ b
.btn3_mouseup { , i$ \! I! `0 S; N4 `! P% x
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' p/ ], F6 v: f
}$ U4 k$ x' n8 C' A( w; y! C
.btn_2k3 {, g& A3 i/ b2 E- P5 y$ `
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 - [& b7 A4 L7 [" u. E1 P4 D q
}) i: G7 U$ a/ s- k( w6 ?
</style> 9 J: Q7 m. S9 q+ T2 p+ N' C* a, [
<body>0 m! _( M* g% ~2 C' ^- ~& i
<button class=btn title="CSS样式按钮">CSS样式按钮</button><P></p> : ~0 P* w" W7 w4 p6 ~
<button$ b3 S- P+ G% D
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" ! q/ \( Y7 p' S& b
onmouseout="this.className='btn1_mouseout'" / U/ @* Z, A" p0 h5 q
title="CSS样式按钮">CSS样式按钮</button> 8 ^! I9 t1 c: a* h! q- e0 {
<button 7 Q. [* t A* B
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"% ^- p+ p# F& o& {6 Y3 i9 i
onmouseout="this.className='btn1_mouseout'" DISABLED>CSS样式按钮</button>5 S0 H: v- ^5 R* q1 z
<P>5 v9 k z1 ^5 t k0 \! K
<button class=btn2 title="CSS样式按钮">CSS样式按钮</button> 3 X, `1 w3 O1 q9 e
<P> 9 {( @" u# q! g7 ?
<button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"( S! A1 x. G5 R$ f
onmouseout="this.className='btn3_mouseout'"3 S" W: ~* R/ @& s; I; C6 ^7 ?
onmousedown="this.className='btn3_mousedown'"' L' O8 I6 P) U/ c
onmouseup="this.className='btn3_mouseup'", d; C$ N5 I9 s L% h2 K
title="CSS样式按钮">CSS样式按钮</button>4 z$ _; V8 o1 c' \8 z5 Z
<P> ' p. A( n r1 Y3 ]: n
<button class=btn_2k3 title="CSS样式按钮">CSS样式按钮</button></body>6 Z, @6 y+ U6 E- Z* q

复制代码

账号		自动登录	找回密码
密码			入住遨海湾