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

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

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

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

  1. 3 C  y& k# `# _) n
  2. <html>
    0 c, h1 D7 l; B  T  O
  3. <head>
    & A1 V+ e2 T8 u* X3 m9 }
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">4 L) ?* z, T3 x$ }8 D6 i
  5. <title>CSS實現的幾個非常漂亮的按鈕</title>" Y- y; E% a* G6 ~* A( Q4 o  U
  6. <style>
    - T0 ]* d# q7 {. |
  7. .btn {6 A) W/ N4 f0 F: Q) f5 C- ~" X9 S
  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! Z. L0 S) Z3 ?3 i$ p/ w6 h5 y/ D
  9. }
    7 v( `! N9 I: [+ s. [4 g
  10. .btn1_mouseout {
    % N( E, y! [: r( W5 R! c
  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/ Z9 f) x, j0 p4 I' V* m
  12. }
    6 H5 E8 O) L5 H; [9 q
  13. .btn1_mouseover {2 \1 N8 R; n* l( Y
  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
    " \8 W. P9 A. e' z+ V% `' x+ C" ~
  15. }
    + c3 z! b; D) g4 D$ `8 U% H- W* v
  16. .btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
    4 W; D! n. O. W8 e; T# q2 b
  17. .btn3_mouseout {' F/ P  i# `. z* e! @/ i
  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
    " n9 Y/ o3 T1 v( K. T
  19. }! F, `$ ~+ D# p) W0 `, m! z
  20. .btn3_mouseover {! G2 @/ B: K+ 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 solid; N- W6 m9 f/ c6 Q) J! u
  22. }. E5 h+ F, s  a; F+ K
  23. .btn3_mousedown
    * d) }- r1 t$ H7 k2 k4 O8 I
  24. {
    % o7 x2 C" V/ H5 \' L
  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
    ' G0 r3 P- J" c" w7 H+ C- F: r! J
  26. }
    6 t3 r6 }, Q! v! R7 N8 j& J
  27. .btn3_mouseup {7 T4 @7 Z+ a; E( @. D
  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' f9 T) \% E) n3 }! A+ o" p0 j
  29. }
    8 K6 \: m& X1 O$ V- D  @4 }/ {. ?/ C, e
  30. .btn_2k3 {
    0 i9 j$ g( |: K3 p# C* K* w1 l2 J
  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
    4 j7 e, E9 M% t6 {+ j# |3 \9 K
  32. }, o& A; F* G$ y3 n
  33. </style>
    $ B2 G' Z4 L  J5 u8 U
  34. </head>- s8 O9 x/ i4 O; ?+ A
  35. <body>
    " @1 v9 R' k& ]. w( G
  36. <button class=btn title="好看的按鈕">好看的按鈕</button><P>
    * a3 `! M/ v2 t$ h
  37. <button
    3 U" h( ^2 a$ C9 |3 p
  38. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"+ H7 g+ V' T# W/ Q# e7 w9 z1 ^
  39. onmouseout="this.className='btn1_mouseout'"/ Q2 b" s8 T- ~. k! u+ E
  40. title="好看的按鈕">好看的按鈕</button>
    $ e- j% m! Q6 e7 `% b9 X! O: S
  41. <P>5 I$ }( [5 T* A: _& M, p5 `0 z
  42. <button3 o2 o1 [6 e  Z$ J9 |. S
  43. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"1 D" k0 c$ }" I6 ?/ G
  44. onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按鈕</button>
    % X+ R4 S/ r8 g' j* U7 `$ z
  45. <P>
    . A$ S5 U, ^: h# m" }
  46. <button class=btn2 title="好看的按鈕">好看的按鈕</button>
    ( ?" V, U+ G* x. n% d& q
  47. <P>
    + ^' ]4 [, j' h% Y- K: @: y
  48. <button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"2 c) V1 B3 b3 M0 U9 w
  49. onmouseout="this.className='btn3_mouseout'"# j( _' x) M# G" n8 _* Z9 Q
  50. onmousedown="this.className='btn3_mousedown'"
    8 Q/ X( E/ A+ t7 R
  51. onmouseup="this.className='btn3_mouseup'"
    * j& m9 _& D3 p; W
  52. title="好看的按鈕">好看的按鈕</button>
    9 x! ~# v+ I, @; f1 h) g4 _* _
  53. <P>4 E9 Y  ?7 [8 D3 J) u; t( i
  54. <button class=btn_2k3 title="好看的按鈕">好看的按鈕</button>, b/ |3 E/ T2 [* A: G+ K7 E
  55. </body>( q- N$ @* Q" M. E3 X2 ~
  56. </html>
複製代碼
按鈕, 網頁特效

相關帖子
回復

使用道具 舉報

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

本版積分規則

过期高净值品牌域名预定抢注

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

GMT+8, 2025-5-6 20:38

By DZ X3.5

小黑屋

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