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

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

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

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

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

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

×

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

  1. <style>5 r" o0 Y: b; N$ K9 Q" b
  2. .btn { 5 Q& l- s& ^' U2 a2 j
  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 ' k3 ]8 |: ^, H
  4. } 1 ]) E! F ?) d
  5. .btn1_mouseout { , W @2 ? H8 w# n
  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 ( C `5 z/ v( H# [7 L7 T
  7. } 9 O& {# P+ a5 h) P
  8. .btn1_mouseover {5 I/ g' z( h$ k8 V h
  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 - o Q; E! c2 ~( p
  10. }1 j9 Q6 o9 B R, ?
  11. .btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}6 D- p+ L/ M y
  12. .btn3_mouseout {4 B; B; O" e$ ? o( [3 }3 q9 @
  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) G) Y, G2 o5 I
  14. }' `0 s; @* x8 C+ v9 ^( B ~- _
  15. .btn3_mouseover { # K& r3 S [# n' L
  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 solid7 v/ C# e$ h( l% K, u, F, n
  17. }* L) ~ v1 }3 P2 {: `
  18. .btn3_mousedown9 ^- r/ o+ s8 J6 m; j
  19. { ( W" G- `) C, D9 t1 |8 ~# 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+ H5 `4 K! z7 \' {! Z( R0 Y
  21. }9 u! \, U8 i- t1 g5 ~
  22. .btn3_mouseup {/ B# B/ p" {! r
  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 solid5 ?) X/ I/ i: j
  24. } n1 t t2 n7 u4 a" c
  25. .btn_2k3 {9 _6 y5 e9 g4 g. c/ i' L e/ s& m7 g
  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 solid1 h' E2 m: ^$ ^, \1 M
  27. } % C2 q& Z/ i/ t( W; Y0 _4 _
  28. </style> * z. D9 y' u0 f3 y3 q3 H
  29. <body>6 r, k" s6 E3 r/ Z E; m
  30. <button class=btn title="CSS样式按钮">CSS样式按钮</button><P></p>1 Z& q- T' l& C7 M
  31. <button 6 ?; M& R2 n" ]* @1 l/ m
  32. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" ) T% z# w) v% ]& _. M- b
  33. onmouseout="this.className='btn1_mouseout'"9 i3 A- V0 s& }+ B+ D5 v7 d
  34. title="CSS样式按钮">CSS样式按钮</button> 5 J( ?) U; l. i
  35. <button0 o; g3 {: e6 q3 D! T+ M
  36. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"* h5 C- U% V! G- A3 x& u
  37. onmouseout="this.className='btn1_mouseout'" DISABLED>CSS样式按钮</button>' S$ O: K. B9 G- A# \1 e
  38. <P> * c' J6 r: w5 E
  39. <button class=btn2 title="CSS样式按钮">CSS样式按钮</button>: d$ J, F+ u* g9 B! n2 v5 ]
  40. <P>6 j2 v$ i+ I9 B! N2 b: X( b. P
  41. <button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'" c/ S# c. p2 G& q7 H3 h
  42. onmouseout="this.className='btn3_mouseout'" . c8 l1 K$ t0 j" A
  43. onmousedown="this.className='btn3_mousedown'"# B( t9 K1 n% c. D
  44. onmouseup="this.className='btn3_mouseup'" 2 N; P7 `* Q- Q! ~3 [- d
  45. title="CSS样式按钮">CSS样式按钮</button> 1 ~1 [3 {$ p) m& k- M
  46. <P> 2 c7 X& C2 }# l4 K8 N! a- S4 @
  47. <button class=btn_2k3 title="CSS样式按钮">CSS样式按钮</button></body> ' l* H+ ?) V$ {" c
复制代码
遨海湾-心灵的港湾 www.aosea.com
回复

使用道具 举报

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

本版积分规则

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

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

GMT+8, 2024-11-22 08:23

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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