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

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

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

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

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

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

×

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

  1. <style> Y$ t( E2 ~' S7 p
  2. .btn {; G! A4 P( c: ~" d6 R1 h. [- N1 Z
  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 5 d% g5 A/ L+ ]- [8 w: k2 S
  4. }! Q7 V( G9 O+ P) Q
  5. .btn1_mouseout {! e/ `6 N- B# o. t* I5 [9 Z
  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 4 V# u6 N; w( ]; m' V
  7. } . G. D9 e+ s0 M& k* q2 B' @: ?! V
  8. .btn1_mouseover { ' H+ t* |( Z! \! q- ?
  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 9 K, I+ ]5 S! I) q
  10. }6 _7 L7 r) A/ _- v, x! {8 c) z" F
  11. .btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;} 3 u4 A' t N$ ?# X% ]
  12. .btn3_mouseout {9 W, s1 W/ ?, N9 o% o- N
  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$ O9 X- W$ K4 z1 M
  14. } 5 t5 P4 ~4 a* P% ~& q/ p
  15. .btn3_mouseover { 7 D+ I/ \$ h( w+ w9 _0 d
  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 / s- x6 }4 n( X; P) \9 ~# |* @2 |/ g
  17. } ]$ n: t- X5 N; ~ k
  18. .btn3_mousedown : C9 V. z: ~0 p7 D
  19. {: [' ?6 f# @7 v5 b1 m+ ~" w
  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 solid1 j2 i& j5 M' z' j) A3 ?
  21. } 4 w- ~, ]; f. Q' A
  22. .btn3_mouseup {7 |2 E9 {9 a$ q! i d p/ Y
  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 * n! V6 p$ Y% B7 E' U
  24. } 2 W9 v; s" L! f
  25. .btn_2k3 {6 F( C. W6 z$ R: h; 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 solid5 G0 d; r/ L# Q
  27. } ( j* k2 k" ~- q& E2 l( t
  28. </style>6 g" A+ B. _- u c
  29. <body> 9 m: P% ^& Y2 j G6 I
  30. <button class=btn title="CSS样式按钮">CSS样式按钮</button><P></p> . \3 h9 E% ]7 X g$ N: D
  31. <button & Y& S* }9 {8 p# I
  32. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" 4 |8 p k. ^1 ~# j
  33. onmouseout="this.className='btn1_mouseout'" % i! i) E4 Y; ^2 ^
  34. title="CSS样式按钮">CSS样式按钮</button> / n' ] C. V/ {, x5 i
  35. <button1 @- e$ h+ x& z" j3 {
  36. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"" t9 \' a- \1 n% G A, Y
  37. onmouseout="this.className='btn1_mouseout'" DISABLED>CSS样式按钮</button>9 W4 u" l9 V2 q) l6 t6 x4 o' T3 u9 m
  38. <P> 2 `3 I% [9 ?7 l5 E% d/ [/ C$ j, X
  39. <button class=btn2 title="CSS样式按钮">CSS样式按钮</button> ) Q( w/ L0 A$ J
  40. <P># A9 n: a1 y9 a! Q2 W. [
  41. <button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'" N( P% L& G% O
  42. onmouseout="this.className='btn3_mouseout'" $ J5 {9 Q# g# i& N
  43. onmousedown="this.className='btn3_mousedown'"2 q# [( R, ?! S* X2 A3 k
  44. onmouseup="this.className='btn3_mouseup'"7 |1 D2 r- x! b5 n
  45. title="CSS样式按钮">CSS样式按钮</button> & M5 a6 L& S6 \+ s% b* g8 W& ^/ g
  46. <P>. Z2 e& s0 f. Y; T5 g+ }
  47. <button class=btn_2k3 title="CSS样式按钮">CSS样式按钮</button></body>1 m. J* X9 s7 \2 M
复制代码
遨海湾-心灵的港湾 www.aosea.com
回复

使用道具 举报

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

本版积分规则

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

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

GMT+8, 2024-11-22 07:37

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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