切換到寬版
过期域名预定抢注

 找回密碼
 免费注册
4um點基跨境網編創業社區»forum › 英文站交流專區 › 其他資源（PDF,PLR,YTB,FB,付費教程等） › 網頁特效：個性化的網頁按鈕
返回列表 發新帖

網頁特效：個性化的網頁按鈕

[複製鏈接]
發表於 2008-2-27 21:51:18 | 顯示全部樓層 |閱讀模式
用CSS製作的超漂亮實用的網頁按鈕，如果您有用就直接拿過去用吧！

  1. 0 ?  p/ t9 g* }
  2. <html>4 L& s# {0 V! I5 }! y# O8 {
  3. <head>
    1 l  ~) L5 l! Q* v$ S
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">3 A9 K# j  `! D3 e8 Z9 ?
  5. <title>CSS實現的幾個非常漂亮的按鈕</title>* N6 A1 ^' v- \  Q) J) L$ x. `+ e
  6. <style>0 A+ Z7 l: w5 K1 E2 E
  7. .btn {
    ; W& s: _' V& ]* N
  8. BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progidXImageTransform.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+ W- M  i8 Q  N4 N7 u) n1 Z& N1 W
  9. }
    7 n% L6 {& s3 m3 D( F
  10. .btn1_mouseout {( c' a+ X5 m, ~) p1 E
  11. BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progidXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid5 w+ ^3 D4 m9 j: V8 n% U" C
  12. }! k# g# K/ y' M( [  V' P
  13. .btn1_mouseover {7 _& K  _% {) p, T8 M
  14. BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progidXImageTransform.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
    $ y; O/ s- q0 G/ [+ L
  15. }
    3 a" d) J9 X+ V
  16. .btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
    0 [  [: O: I( G: ^1 V* J1 m
  17. .btn3_mouseout {# ?+ [$ ?3 k, B' p1 m
  18. BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progidXImageTransform.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& w# _# G3 j2 s& O2 ^2 G5 V0 {' D
  19. }4 }$ P' x* Q$ v: C
  20. .btn3_mouseover {3 j5 X2 o9 T% R, a0 r) l, Y
  21. BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progidXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid9 c' |: c' |# n0 i
  22. }
    5 p/ |8 w3 s# E" \5 K
  23. .btn3_mousedown- b! D; o- \  d: Z
  24. {
    ! z5 D* u% d6 {5 O+ K5 p4 V2 S
  25. BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progidXImageTransform.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  ?" x$ F$ P1 o) u3 p
  26. }
    6 o  o4 l+ Z# E, R
  27. .btn3_mouseup {
    ; V: k) t& r2 g) \
  28. BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progidXImageTransform.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# k6 b+ b9 Q! P- ]% H  m5 P- x
  29. }( R9 l4 i0 [8 A4 }6 D
  30. .btn_2k3 {" N/ x3 v" h) }8 x. J& u
  31. BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progidXImageTransform.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
    : Z: F/ ]5 M# |$ g
  32. }0 \3 s/ o" q' b/ V+ v/ u6 B& I
  33. </style>" }2 J0 C" F, L, n" z2 [' q
  34. </head>* K6 f7 w: e% B  ?. ^8 q
  35. <body>
    ! \4 B/ L9 i( U
  36. <button class=btn title="好看的按鈕">好看的按鈕</button><P>4 G4 {: q6 {. |8 q7 T2 _  K
  37. <button
    / d% `, u6 o! s1 i: a
  38. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
    9 k6 \# s+ w7 k7 L3 K1 C
  39. onmouseout="this.className='btn1_mouseout'"
    / D  w9 h- Q; g' p1 z! ^7 M
  40. title="好看的按鈕">好看的按鈕</button>
    3 i2 B/ e  L' x. q5 [- y+ K2 f7 a
  41. <P>0 w0 M( _" m8 c8 K
  42. <button
    : S- M  }% ~% o' F1 I9 u
  43. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"# A; f7 G' X7 d3 }! B+ N" d
  44. onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按鈕</button>
    4 N8 ~: ]2 ~7 f" m5 y3 c
  45. <P>% x3 X4 L$ L6 Z5 Y" \  {" c  P% I6 p
  46. <button class=btn2 title="好看的按鈕">好看的按鈕</button>9 q7 F+ H* g( d* R$ P* o
  47. <P>
    . O) `( |! g$ P* c) C! a& F( P
  48. <button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"5 {. r& v- G8 u" {6 y5 |
  49. onmouseout="this.className='btn3_mouseout'"* y: M# _( Y) q2 ]
  50. onmousedown="this.className='btn3_mousedown'"8 f; Q1 F  j4 B4 z
  51. onmouseup="this.className='btn3_mouseup'"
    3 |/ |8 K- N2 l* r: l9 `  H( X+ U
  52. title="好看的按鈕">好看的按鈕</button>
    4 ?/ w6 R) j1 V. b1 z1 ]' c
  53. <P>' }8 u" u: ]" s3 `
  54. <button class=btn_2k3 title="好看的按鈕">好看的按鈕</button>; Q+ p* u2 n0 R6 N9 q' T/ K1 Q
  55. </body>
    . j9 i  ~! s  H: q, o& f7 `* P
  56. </html>
複製代碼
按鈕, 網頁特效

相關帖子
回復

使用道具 舉報

返回列表 發新帖
高級模式
B Color Image Link Quote Code Smilies
您需要登錄後才可以回帖 登錄 | 免费注册

本版積分規則

4um點基跨境網編創業社區

GMT+8, 2024-11-24 02:51

By DZ X3.5

小黑屋

快速回復 返回頂部 返回列表