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

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

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

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

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

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

×

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

  1. <style>' w' S. `; w2 S7 r
  2. .btn {5 x0 H: V/ ~# h7 b0 @* q6 y
  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 solid0 G# @, k! O4 a
  4. } 3 E1 X7 o, N* P+ g2 ]$ c
  5. .btn1_mouseout { + n0 B- X0 N2 |) N- O
  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 A7 ~7 o' F9 z r) Y, O- E
  7. } `+ N3 H. b& l$ @
  8. .btn1_mouseover { 5 B- n# S0 @/ F4 T5 a2 F
  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 7 P! I, T3 j3 \
  10. }5 x B& }2 f6 I3 J
  11. .btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;} 6 @& ~8 p2 j/ y- M ^2 d
  12. .btn3_mouseout {0 x* W8 L8 g/ \3 K* a3 N- f3 g
  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" M5 k: h8 z& \3 n; {9 K
  14. } % w9 ^' Y, _' O2 o
  15. .btn3_mouseover {3 b9 B0 A4 z# f8 ^
  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 " T. R: A4 M* y" u0 b3 K; c1 W
  17. } : {- _6 y6 ^' ?- {5 d$ [- s6 U
  18. .btn3_mousedown 9 I4 I& f7 c$ a# C1 C, L& a+ M
  19. { ' }2 n- M5 }% F9 o( \7 G7 l1 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 solid3 q% v* S8 W& \( J( r7 s5 v
  21. }$ N+ A, s$ x1 A" b1 `
  22. .btn3_mouseup {2 w. u# e5 y3 _9 ^
  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$ G% T N. y8 E' b
  24. }% _& T' |8 [( Q& Y% S$ \# H+ I
  25. .btn_2k3 { * k. \7 |: _% V. R9 r( p" a4 Q
  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" k# v+ c; T- |8 y1 D4 ~$ \
  27. }; s9 `2 F; u) I/ c
  28. </style>- ^2 s! z* N& ?8 Z1 J, ~
  29. <body>1 G5 Z. L/ ~6 q
  30. <button class=btn title="CSS样式按钮">CSS样式按钮</button><P></p>$ a& H$ u/ s5 e6 d. L- g
  31. <button . z% ]) s6 `- l2 u$ E1 F5 P# m
  32. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" ]' @: r) K+ l
  33. onmouseout="this.className='btn1_mouseout'"* q: [! ~2 \% Z/ I W0 Y9 t3 u2 z
  34. title="CSS样式按钮">CSS样式按钮</button> * P6 ? M' p: M
  35. <button* r7 c* h3 @! g) U1 V# [
  36. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" ! j6 K9 e. K) H% G
  37. onmouseout="this.className='btn1_mouseout'" DISABLED>CSS样式按钮</button>! G8 {0 C* z) W. ]4 ]
  38. <P>' z; Z/ Y; Z+ ?& _5 e8 f) ?0 s- M- @
  39. <button class=btn2 title="CSS样式按钮">CSS样式按钮</button>8 g- m; `0 c/ t4 B# Z
  40. <P>4 {! E$ {2 L" `5 u0 }
  41. <button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'" 0 H% t4 y0 u' R
  42. onmouseout="this.className='btn3_mouseout'" 4 o' c! N2 U/ T; {/ K' r5 }* i7 Q! J! `
  43. onmousedown="this.className='btn3_mousedown'" 3 @6 r) c( }( _4 f# J! Z( Z# [/ N
  44. onmouseup="this.className='btn3_mouseup'"+ v4 S5 N6 R2 i: E
  45. title="CSS样式按钮">CSS样式按钮</button>; T5 E- o: }6 X0 d" V; c8 f3 G
  46. <P> 5 H6 l" F) Z; ]8 c/ q q" n
  47. <button class=btn_2k3 title="CSS样式按钮">CSS样式按钮</button></body> 7 b# t1 R. ^+ J
复制代码
遨海湾-心灵的港湾 www.aosea.com
回复

使用道具 举报

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

本版积分规则

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

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

GMT+8, 2025-5-15 06:00

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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