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

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

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

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

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

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

×

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

  1. <style>- w# m2 ^1 M9 ], A
  2. .btn {( [( [' @! q$ N, w* G( `8 |
  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; r$ X8 q. ?! L6 F4 ]+ Y9 |
  4. } * }$ e" G9 j2 M( k6 z9 @; g
  5. .btn1_mouseout {0 _- k5 i9 \& V% z6 I$ I+ u
  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 6 T' w3 p% v$ S) j
  7. }$ }$ K+ H) G/ Y% R5 q0 s/ _
  8. .btn1_mouseover { 9 t4 O0 @: I9 b) t
  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( z8 W$ I) ^" w/ O* t- @: a
  10. } $ Q3 p2 I7 l/ k9 v9 o/ |* ?
  11. .btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}+ r# |8 \" f8 m6 E8 o4 S
  12. .btn3_mouseout {* V* a7 R p5 A( V- o! s# t
  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 solid1 Q3 L' p3 ^ o5 ]9 T
  14. } 2 o) i. g! }$ o
  15. .btn3_mouseover { ( [( R) S- x9 { ^ B
  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 6 x1 P0 p+ z* T; ?0 Y$ R
  17. } ; {; g# w, _: B$ J1 o' J
  18. .btn3_mousedown& ]3 s- q& ^% l* s6 h% `4 x# t. }7 B
  19. {6 ]4 F( B# P( w2 [0 e4 N# ~
  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: J% S s1 N- |6 Q, L% t
  21. }' m( [+ f! p1 a( x9 i9 b% Z
  22. .btn3_mouseup { . {- O! H6 _9 S e9 T& ~4 W; R0 a
  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, c' I* |9 M6 Q6 @
  24. } + I8 v4 v( e9 _$ V i
  25. .btn_2k3 { a+ I# z2 p" H( \
  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; W% {0 t0 d% c& k9 O; s8 y
  27. } 7 R0 t( Q0 o% [9 `
  28. </style> % c H$ [+ S4 E% W; K5 q5 t" t! I
  29. <body> $ z- B' {7 X [# \4 E7 q- s: q
  30. <button class=btn title="CSS样式按钮">CSS样式按钮</button><P></p>3 V/ i* e* G5 h( v! Y/ z
  31. <button 8 f$ J* d5 _6 Y4 {
  32. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"' I( E7 R5 ]2 q: F8 ~& O6 u1 T6 m
  33. onmouseout="this.className='btn1_mouseout'" ' E7 Y& L# w6 s S: ?4 C: |
  34. title="CSS样式按钮">CSS样式按钮</button> 4 y. u$ `" e; S7 D
  35. <button & x" E5 a' o( H. q
  36. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" 1 H" L$ A s; Z5 x& W' l) k
  37. onmouseout="this.className='btn1_mouseout'" DISABLED>CSS样式按钮</button> . r" S2 G J& N2 D- Z
  38. <P>0 @5 Q$ S# N! y: `& e
  39. <button class=btn2 title="CSS样式按钮">CSS样式按钮</button>( W- _1 q$ [1 q, C$ L
  40. <P> }; k. r, e2 i' b2 W* I
  41. <button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"& r2 O1 a& l3 N1 K0 L& O# k+ i/ h
  42. onmouseout="this.className='btn3_mouseout'" ) d2 G. N( I& c7 H9 V
  43. onmousedown="this.className='btn3_mousedown'" t) h) R; L* y! U) R/ m3 h) I
  44. onmouseup="this.className='btn3_mouseup'" ' {$ \. E* }7 S9 Z% D8 k
  45. title="CSS样式按钮">CSS样式按钮</button> ) T c3 W7 L: d( k" m
  46. <P>+ a H% Q; b% p9 s; E
  47. <button class=btn_2k3 title="CSS样式按钮">CSS样式按钮</button></body> : W3 M+ q1 G: g' { J- T3 b
复制代码
遨海湾-心灵的港湾 www.aosea.com
回复

使用道具 举报

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

本版积分规则

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

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

GMT+8, 2025-4-4 22:53

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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