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

顯示全部樓層 · 發表於 2008-2-27 21:51:18

用CSS製作的超漂亮實用的網頁按鈕，如果您有用就直接拿過去用吧！

* b5 C! C. {5 u3 e6 O
<html>
8 H6 O6 T2 [$ F7 e
<head>" ^6 a/ G! V* ?3 C
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">* u* g7 N$ s- s, _: L: x
<title>CSS實現的幾個非常漂亮的按鈕</title>
! N0 F, a+ l" R1 _ T: x9 c, j2 i2 w
<style>
" @3 c, j' j$ s. l' f
.btn {: q: `; [2 }/ y6 ?
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& e& t. o2 b3 ?' Y
}
' Y. K, R$ O+ m* t; I9 g) V
.btn1_mouseout { q$ ] [7 H/ T( x( I5 N) V
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 solid0 K" \: v$ S) \) ]0 t' z
}
4 Y/ x4 ~7 |# R' x9 k% }
.btn1_mouseover {. W3 v8 t, ?) I" U S
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 solid2 M9 E5 R! n! `7 m3 L& ]
}
d: E, A/ s- u- v; n
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
% |& ^" l1 y2 g8 V
.btn3_mouseout {
0 j1 x) \% b' |3 j# f" h, u; @
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
* {+ V4 `2 j$ c$ _, j( H
}
. Z3 U, \% [: ~8 a0 D: C
.btn3_mouseover {
2 W9 o+ f, R8 V+ P- v
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# x# i, ~9 e/ ~" J
}
3 O4 W! Y& k; f2 C& b3 E" P
.btn3_mousedown$ B/ R! `+ q; w
{
2 N; T5 V/ g2 S6 R/ l1 h. U
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% L; B: p' E: {3 i! h) J1 h" a; }
}
0 Q- J k" t1 W" L4 h
.btn3_mouseup {
" `. K ?& I" W4 L; z
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
; i8 o8 u5 @, {: r5 g6 {
}
: l# i. \$ V% D' U* i1 y
.btn_2k3 {
* Q* |6 i: H ]/ g0 B
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 solid0 _/ ^8 R9 S; V, @
}. U$ q7 P3 n. o) [7 D
</style>3 r+ \. [6 \- j3 B3 r# V G
</head>" Z9 g$ B: q* D k5 C; a2 q( Z
<body>
" T5 K/ ]" E- I* _
<button class=btn title="好看的按鈕">好看的按鈕</button><P>
/ A4 J. C6 t& i4 M2 K' X- x9 |
<button
' ]5 w6 U" P0 M5 t0 n! f& Y, `
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"9 _2 }8 o4 I5 L3 Y9 M7 ]# m) R
onmouseout="this.className='btn1_mouseout'"+ s5 c. ]6 p& m1 ?
title="好看的按鈕">好看的按鈕</button>
' g3 P- N9 p0 n6 E7 D
<P>% |+ ~# h) X, Z5 {9 q* f f
<button. y3 h7 `. N8 `; p( T
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"7 b- a; k' r2 f) z+ u) v* c
onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按鈕</button>
+ ~5 _% c& \' X$ X- D
<P>
6 @8 Z1 `9 D' d
<button class=btn2 title="好看的按鈕">好看的按鈕</button>
4 T) Z* D& w. O; Q3 i _; Z5 g
<P>1 s9 s [9 }6 E5 K$ S
<button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"
& G/ _+ B2 _9 z: ?
onmouseout="this.className='btn3_mouseout'"
" S* J+ V: G! I C2 w9 b
onmousedown="this.className='btn3_mousedown'"
2 G9 t, ?' J/ t2 ~7 S
onmouseup="this.className='btn3_mouseup'"4 y, z, H. |; o5 L* p. i
title="好看的按鈕">好看的按鈕</button>4 A. X+ r0 |* x7 m
<P>3 f6 M# \/ b ^/ Q
<button class=btn_2k3 title="好看的按鈕">好看的按鈕</button>
% ], h; i2 D2 q& s% i- ?! G7 c' }
</body>
1 q: r! |8 `( k8 T1 s4 A" B
</html>

複製代碼

		自動登錄	找回密碼
密碼			免费注册

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

相關帖子