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

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

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

[複製鏈接]
發表於 2008-2-27 21:51:18 | 顯示全部樓層 |閱讀模式
用CSS製作的超漂亮實用的網頁按鈕，如果您有用就直接拿過去用吧！
  1. + ^, Q: o& J) U" P$ n5 J. u
  2. <html>
    2 Y" A8 U7 d9 K  h
  3. <head>
    ' |* f9 t- k, T- [" Q
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">6 c0 [+ y# h" ]: X. \5 M5 R
  5. <title>CSS實現的幾個非常漂亮的按鈕</title>- i' k) z# O4 e9 h# N. Q0 A9 j' \) o9 x
  6. <style>
    5 M* }5 G) M+ a% z
  7. .btn {
    7 x+ x( i. D: U
  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
    7 @/ s4 y$ Z6 [  o, z  P2 X
  9. }+ |% q- X0 J9 c. @3 y
  10. .btn1_mouseout {
    * A( i2 v6 Y" I; |" v/ o. 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 solid
      R/ G, v8 a# e, w, }" @0 W( o" i  {' C
  12. }' U. \+ I, }7 T4 [2 l/ F; E
  13. .btn1_mouseover {$ y9 S& ]6 s: h  P4 j9 Z7 y' N) J
  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 solid3 y  V' _6 q: t; K! e& Q" w6 q
  15. }
    & n/ e+ ]8 Y# Q. P  X  j
  16. .btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
    9 K, `4 V" |+ y( D% @
  17. .btn3_mouseout {. G6 W4 m* i/ L; }' r' 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) p8 p* F) L  B4 b/ U
  19. }5 R$ c1 L. T" v) e* z0 R) l
  20. .btn3_mouseover {0 g; A+ C9 d3 O/ t& |3 h& {
  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' Z8 o- m9 z0 C* H
  22. }
    3 _2 h* T0 m" R0 B
  23. .btn3_mousedown
    % ~% n) D& E( P5 F$ x
  24. {5 T- B! V; d8 \
  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
    ' N2 O$ ]( h! s% t/ a
  26. }
    5 M0 K" N. @$ O
  27. .btn3_mouseup {# H* Z5 u% L  [  H
  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
    ; ]' k4 L4 r9 D  ^( N/ Y" B& Y
  29. }
    - a- x# V8 a) A/ \1 S
  30. .btn_2k3 {' [8 r7 y" L, A; v9 ~! v1 C
  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. ~: x  w3 o0 H6 l( V' [
  32. }2 J8 }: G) ]5 F8 X  A9 K$ u
  33. </style>' z( r. \- J) `2 B5 c/ ]0 E+ S
  34. </head>1 k2 Y1 b+ m6 A: N2 s" L2 y5 T
  35. <body>0 h( R% L# U/ }! \
  36. <button class=btn title="好看的按鈕">好看的按鈕</button><P>8 o6 ]/ ?/ u- _* \: z! n
  37. <button
    8 m( w/ G$ `8 w2 s0 a. k( N
  38. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'", G7 Y) y/ `$ r8 l% d# O4 K% X( r
  39. onmouseout="this.className='btn1_mouseout'"+ {1 ~: C: R7 ^
  40. title="好看的按鈕">好看的按鈕</button>* _" b4 C# L7 Q9 _. p# a1 O; T: t
  41. <P>/ t0 s- q$ \2 k
  42. <button5 ?- a- l- T: {* e
  43. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"/ Z1 R2 d, ?3 u$ ?# i
  44. onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按鈕</button>1 y" K6 d" R: d+ X% G
  45. <P>
    % J( F, N$ W  A! y1 I( S5 N/ c) [
  46. <button class=btn2 title="好看的按鈕">好看的按鈕</button>
    & a' g* @9 p; f+ w
  47. <P>
    2 J8 h, n' {& I% M! r1 g1 D
  48. <button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"7 P" ?7 [- r# L0 Q
  49. onmouseout="this.className='btn3_mouseout'"* k$ s# j: L- K8 e6 y; i' y% C
  50. onmousedown="this.className='btn3_mousedown'"# _$ a/ k+ T; `: O( Z
  51. onmouseup="this.className='btn3_mouseup'"
    " U: @) Y; g4 `8 ?! o0 H
  52. title="好看的按鈕">好看的按鈕</button>
    ) G! i- f# \  l+ }! ]
  53. <P>
    : a2 `% n. N8 e
  54. <button class=btn_2k3 title="好看的按鈕">好看的按鈕</button>
    ( D( Q9 W0 u6 G( d6 u6 _
  55. </body>
    ! e1 x5 v" z2 ^( o3 l3 _6 m9 p
  56. </html>
複製代碼
按鈕, 網頁特效

相關帖子
回復

使用道具 舉報

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

本版積分規則

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

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

GMT+8, 2024-11-27 19:11

By DZ X3.5

小黑屋

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