设为首页收藏本站网址
切换到宽版

 找回密码
 入住遨海湾
搜索
遨海湾超级社区»论坛 › 电脑学院 › 电脑强人 › 几款很漂亮的CSS控制的按钮样式
网站解决方案专享优惠-3折上云
返回列表 发新帖
查看: 752|回复: 0

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

[复制链接]
发表于 2008-9-2 11:03:35 | 显示全部楼层 |阅读模式

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

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

×

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

  1. <style> . m! C5 U7 `" Y& E
  2. .btn {" D4 }% {2 q" a, `
  3. 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 6 K( K. H# }: I' p' x. {! N
  4. }' B8 F, R d& |7 O9 y4 p2 v
  5. .btn1_mouseout {: u+ z) w/ |# B; Z3 G( f9 s2 V
  6. 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: Q2 n( U T- f0 i. L, o4 f5 X
  7. } , }+ d" ~ K' C# P# l% l
  8. .btn1_mouseover { ; }& D3 i( M9 W7 Y. }
  9. 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 + W3 @" l I( u* \. w
  10. } 1 n, Z; k$ u% {' n% u; k0 ^
  11. .btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;} 0 q) ~0 L1 X$ E7 e0 Q" E
  12. .btn3_mouseout {6 |1 R' }5 z1 L' H' _
  13. 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 0 s7 E/ h# a: \/ Y4 }5 Q1 V$ s
  14. }* v: N5 n9 F' q/ x
  15. .btn3_mouseover { 5 ?+ D) `! {' f8 O' K* A5 t, D5 c: r
  16. 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 + k* ?9 y% ?! a% V3 ~# {' Y
  17. }: d& [8 t8 M7 q2 ?% Y4 K
  18. .btn3_mousedown+ I8 C* q* @5 j; \3 m
  19. {! v K3 `8 d: W/ l0 x- P
  20. 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 2 m8 q2 Q/ f2 ]4 @4 ?6 s; R
  21. } , Z; r; r M. V: k4 K
  22. .btn3_mouseup { ; f. Y3 A, Y, b: x7 U, \
  23. 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 / L L' G0 W1 C4 b$ R% W
  24. }# t8 G; k5 w" J5 |3 d' ?, G
  25. .btn_2k3 {, [1 l3 X) G# g, d7 R" v
  26. 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 / z9 H, {$ ^7 u8 Z
  27. }) U* ]7 H& L ]; C* X
  28. </style>& p2 X" n d( ]- e3 ]# \
  29. <body>2 @+ ~3 i7 {* i/ s0 X( ^1 T
  30. <button class=btn title="CSS样式按钮">CSS样式按钮</button><P></p> $ U/ N5 g3 G6 b8 m2 h9 W
  31. <button1 e2 s/ m7 f: _* K' e! B) G
  32. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"% C: C% j2 b4 I O
  33. onmouseout="this.className='btn1_mouseout'" 8 x, e2 \7 N; I5 t1 T
  34. title="CSS样式按钮">CSS样式按钮</button> 6 Z1 \5 n! i0 y T( Y* s
  35. <button " T, }8 g5 M9 i% \$ J5 P0 t7 u
  36. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'", m `5 V# w, ]; A; @2 i
  37. onmouseout="this.className='btn1_mouseout'" DISABLED>CSS样式按钮</button>6 }* a6 ?* h* T
  38. <P>; i* k& z' I7 j- _4 G* d
  39. <button class=btn2 title="CSS样式按钮">CSS样式按钮</button> 4 Y3 G' S k6 v) O$ e4 a
  40. <P> ) |0 N ~% O6 H6 x- j3 G
  41. <button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'". k6 |3 t8 |2 c( v: R/ d
  42. onmouseout="this.className='btn3_mouseout'"+ e1 a' M' W" T4 r! N, g. x+ \2 K! K
  43. onmousedown="this.className='btn3_mousedown'"8 O, E* `2 p+ w! f: t/ u, y
  44. onmouseup="this.className='btn3_mouseup'" 7 ?* W! L& `4 @9 B$ a( y' \
  45. title="CSS样式按钮">CSS样式按钮</button>& o! y0 o K1 g: E& c( W
  46. <P>1 P4 o- P3 J5 T, c0 m! ^+ y3 N
  47. <button class=btn_2k3 title="CSS样式按钮">CSS样式按钮</button></body>3 c; ?6 P! e$ ?: M; _
复制代码
遨海湾-心灵的港湾 www.aosea.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 入住遨海湾

本版积分规则

网站解决方案专享优惠-3折上云

QQ|手机版|小黑屋|遨海湾超级社区

GMT+8, 2025-2-22 16:37

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表