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

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

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

1 o! Y( i+ X+ F& A1 Z) Q: G
<html>
% Q J& e5 T7 K3 ]
<head>- x+ r) H* @3 R; x
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
9 B9 A# q: v% \1 s
<title>CSS實現的幾個非常漂亮的按鈕</title>5 V1 V# b$ T n/ I# O6 K8 l; N
<style>4 O0 `7 F5 X# G. g
.btn {7 O: N" D3 l& D0 j% @
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: r7 W2 `' D# G1 ]1 B
}
Z5 k/ U* `$ s6 N8 i
.btn1_mouseout {
% [$ |0 w% a4 u/ T- ?0 m' v) s9 x
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
6 N3 Q" f1 |4 U; c
}
6 ^+ `! Y' I9 x4 I& Z
.btn1_mouseover {
1 @! c: @& G+ z
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
4 Z# ]* k! M, d& K) S, J9 ]/ x
}( P" m ?3 ?: b( _ |5 f* X/ z
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}* E" ?. x2 [1 T3 ]3 p6 X
.btn3_mouseout {/ h( {. y4 {+ x( H1 N6 q
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$ Q7 C! d: \1 p4 Q
} g% r! n8 C5 u0 [& [" x) d, e; U
.btn3_mouseover {
* _# X p7 k" J! b: k! W. L
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
5 w2 }& w/ y+ k$ s' N
}+ ^% j9 a# K# l+ h, I2 {# H
.btn3_mousedown
9 h4 G! u$ l3 _$ x" w' ]2 b
{/ E7 J' y. |0 r" e
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
7 }0 I" d4 j& S9 ~7 e' [2 [
}- I: W, X# i/ K0 G: h
.btn3_mouseup {
& N B! X" z' Z: T/ Q2 T
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: r+ P/ i8 V k5 R
}
4 X; C6 R! {, }: h' b, ~
.btn_2k3 {) c0 g$ p7 ~5 w7 Q" g1 k
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
1 G# X% j9 }! ]% F2 o' b' T
}! K& z5 t% F' \
</style>6 `; }. x; d' X, \4 U2 T; b
</head>' c6 y/ A9 w/ n) Z8 }$ O' ]
<body>! X" o- B4 V0 }6 D* J0 E
<button class=btn title="好看的按鈕">好看的按鈕</button><P>5 \7 j, m2 ~4 m: g/ [8 b+ k; h
<button7 v/ Q" T. Z' ~0 n, a* Y7 f
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"- D/ d+ X C3 g$ t4 P, O+ m; s
onmouseout="this.className='btn1_mouseout'"' E2 o9 r! ~0 J/ M5 w2 U o7 g
title="好看的按鈕">好看的按鈕</button>; |* G0 V3 \% t1 G$ ~
<P>
' @/ @" ^ o l- L
<button7 m# p2 H! r- t, u
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
( A# e* V- k: k9 q
onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按鈕</button>
9 l7 Y2 ?4 C0 O4 _' d1 z/ N+ G
<P>' F0 S# V+ r9 w& p; V0 ?! E
<button class=btn2 title="好看的按鈕">好看的按鈕</button>5 N" _# d' L O) G" c: d& k6 u2 c0 @+ i- r
<P>
9 z- f+ l8 _5 i0 Y) t* l# C
<button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'", ?; N0 E( O$ E- z6 D q$ Y0 [. z& L
onmouseout="this.className='btn3_mouseout'"
4 ?) L1 U8 y% {- U# _# X
onmousedown="this.className='btn3_mousedown'"
$ [ o9 _! v& [2 Q
onmouseup="this.className='btn3_mouseup'"* G8 g+ O+ B- Q0 W
title="好看的按鈕">好看的按鈕</button>
6 X' t, v& Z4 S) k8 ~
<P>0 a: b5 m$ I4 q+ v
<button class=btn_2k3 title="好看的按鈕">好看的按鈕</button># j0 U" l: K0 q) }, A, {; n3 N) D
</body>4 x$ L7 [' d$ o- ]
</html>

複製代碼

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

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

相關帖子