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

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

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

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

  1. ( n! G, j3 P& y4 c9 {' v- U
  2. <html>
    ; p! {+ b5 n. m9 x: L
  3. <head>7 M& j% A# o2 s' c7 U
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    , y, y) m4 M2 s# C/ X+ f
  5. <title>CSS實現的幾個非常漂亮的按鈕</title>, m/ e9 Q+ m6 L  g, L. w8 y
  6. <style>3 y( u# b) X8 P) ]( j! t
  7. .btn {
    - P0 J2 ]+ j2 L/ [
  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
    * p2 [6 S) F" G7 }' H) ~9 V
  9. }
    - `; w/ s7 D" i! I& W
  10. .btn1_mouseout {
      o2 t5 k. L: ]' _
  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 solid
    $ z) V% `5 J( e8 j5 S# d
  12. }
    & A/ Y1 i# k. J; F& w; c. F0 A
  13. .btn1_mouseover {
    4 O2 Q* J  d9 m4 q
  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
    & u1 K/ k4 _9 {: t& ?
  15. }
    * `1 q3 y8 L% H7 Y; X' Q
  16. .btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
    % r. N6 p& N$ i; O: p2 F2 F; E
  17. .btn3_mouseout {
      ~7 g* j. q- t) D7 F
  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/ G! F! N- w; P2 n% K/ [
  19. }& k4 w1 E! T$ l, [2 r3 W
  20. .btn3_mouseover {
    3 ^+ j$ q! w8 \
  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 t+ c5 a3 _) m' L5 m. n! P% |& N
  22. }
    $ W, R9 H& D: K1 ~# ?
  23. .btn3_mousedown
    $ C* H5 W8 m9 C. a/ n- D4 \' T
  24. {
    1 B; r% }7 ~/ |: D6 A! n8 V
  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
    " K( U$ F5 ^3 L
  26. }, G6 N, @; `3 p, X/ M
  27. .btn3_mouseup {
    + L" t. @1 M0 z$ C4 X; y: o
  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
    . O0 S! D/ {- o5 Y, Z
  29. }4 E2 o. i' k- T/ e& O
  30. .btn_2k3 {
    & g  {4 S# S+ B) ]: L
  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
    $ O: C. S! j' i4 L% E3 J
  32. }
    % _5 d& ]% V4 R1 U  I: k5 W# X0 C
  33. </style>
    4 ]. f, e% F' c! Z1 g- Z% r0 e
  34. </head>
    7 Q9 r) o. d1 Q; G5 T2 T' {( p5 ]
  35. <body>
    $ U& j4 @  A7 ^8 O+ ?9 C" L4 B
  36. <button class=btn title="好看的按鈕">好看的按鈕</button><P>0 I/ `; ?, m2 ?" |* f! i: f
  37. <button
    % V# ~  ~+ R1 V0 f! Z: A% l
  38. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"  a* V  l: b* L0 k; v1 W& y5 M
  39. onmouseout="this.className='btn1_mouseout'"
    $ B; |' i; D" _- L
  40. title="好看的按鈕">好看的按鈕</button>
    0 z. C( {( }% m: K: H* E/ O) T
  41. <P>
      m+ o  E/ c) e
  42. <button
    & P% M' D5 W+ l8 H6 g
  43. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
    # P7 r7 H3 }; I7 Z- y
  44. onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按鈕</button>- {# O2 @/ {0 z6 {/ m
  45. <P>
    4 D, S* a  K* ?# I2 `
  46. <button class=btn2 title="好看的按鈕">好看的按鈕</button>
    ) b, G2 }5 H( o& E
  47. <P>
    ) Z* s' Z% C8 d- j
  48. <button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"
    8 c/ M& Q3 W% Z: J& k6 c# P3 m
  49. onmouseout="this.className='btn3_mouseout'"
    * J, E; B1 i! K8 I5 _* o# R
  50. onmousedown="this.className='btn3_mousedown'"
    0 |5 G4 G+ V1 p% c) J0 |% b
  51. onmouseup="this.className='btn3_mouseup'"
    * @/ s" ~) A% }) z- T! y7 w$ @' M
  52. title="好看的按鈕">好看的按鈕</button>. [7 c+ K' `2 y% I2 }+ W, l
  53. <P>
    # g+ |. W/ Q! v+ S# [
  54. <button class=btn_2k3 title="好看的按鈕">好看的按鈕</button>
    " \) S8 G& V1 P' `5 {
  55. </body>& X9 \. ~( d% Y% d- c$ C  A& A
  56. </html>
複製代碼
按鈕, 網頁特效

相關帖子
回復

使用道具 舉報

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

本版積分規則

點基跨境 數位編輯創業論壇

GMT+8, 2025-2-19 07:01

By DZ X3.5

小黑屋

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