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

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

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

7 i2 F2 w# G! D1 B
<html>7 r/ V' }: W5 G! _
<head>2 V- \* A4 s0 S9 P. P
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
: h3 O: K2 t9 T6 q7 M
<title>CSS實現的幾個非常漂亮的按鈕</title>+ |/ ~; u) ?( ?+ o
<style>6 w7 {( R5 j7 @. b# z2 S) M
.btn {
* R5 g) ~. Q, ^3 `8 |. B, 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 solid6 M' u: e) P* z+ y6 D( L
}
. M; y# n, o1 D8 A8 O
.btn1_mouseout {
7 t f2 t: }+ B: C& t5 u5 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=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
6 ^2 y! Y0 o+ W i6 N1 N
}, p% y4 X3 J1 H6 X- M
.btn1_mouseover {8 T$ l, ?" u5 e. q$ B" {1 u% o2 L
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 u& R7 B4 s/ M1 {
}% s7 L; ]7 r. y1 C( S# T
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
# q! `- a9 W/ f+ ~5 ]. ^
.btn3_mouseout {* T; M% C6 W5 t6 Y5 Y
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
& h& e: x( ^+ M- R
}
' I# H8 Y& r% V( m
.btn3_mouseover {
8 `1 R/ R3 F+ ~
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, |0 Y2 T' ]2 V0 ?% n6 n
}% C, p$ R( A3 v F0 N8 y3 ?
.btn3_mousedown
5 L5 M; e: g9 a% ]9 E6 _2 q4 Y
{
/ j# S/ H$ R. w5 H1 y; A
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 solid6 c: E7 p* p3 w2 \
}; q' m* T7 J! y1 O2 _% x8 Y1 ~7 u
.btn3_mouseup {
" a3 a, b$ x. [
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/ d( A7 g: s) ]. z
}
- x; o4 _! {1 z: t1 Q! e4 R
.btn_2k3 {
% d, I8 C/ L, M3 v$ J8 x3 w
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) m" H* C7 u- o8 L8 }
}4 N7 e3 \+ K; N8 G. l+ T7 S) |
</style>
& P6 Y# I7 R) P$ j; n2 \. k
</head>
/ \6 k8 e: A+ r5 c @" w/ a8 }
<body>
+ b+ y( [7 ?3 S: }% c* \+ I
<button class=btn title="好看的按鈕">好看的按鈕</button><P>1 T- t% h1 m5 G8 j& j* I" A
<button8 L" G8 M4 f/ `* |- T9 Z$ q: k
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
3 Z. r; e% x; s: R+ P3 D
onmouseout="this.className='btn1_mouseout'"+ y5 b3 {0 Z4 y( S ^, o5 }% x8 {+ X
title="好看的按鈕">好看的按鈕</button>! E' p7 G4 e+ w9 }- A
<P>7 Q* H# J8 J% ^$ ~1 j; m
<button$ }! R( z& t% X5 R( [
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"5 o' \0 A' K' {( h' I: r
onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按鈕</button> Z8 ~( Q" n8 l0 @ Y, ~ P
<P>5 n" e9 y5 a/ [' k5 V: N) l6 o
<button class=btn2 title="好看的按鈕">好看的按鈕</button>% |2 z# R1 L5 Q% \ V5 W% R/ e) A
<P>
6 X1 B! L! ^) Y/ C, x5 Y
<button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'". e( C2 s% ~# B' L
onmouseout="this.className='btn3_mouseout'"
3 y- s' i/ [" ]) A
onmousedown="this.className='btn3_mousedown'") w+ b d- D, m6 H$ I8 }2 D
onmouseup="this.className='btn3_mouseup'"
& D4 E/ H, N7 }$ w% n8 G* n4 W; c
title="好看的按鈕">好看的按鈕</button>
0 X9 n! j" d n' i
<P>/ u: _1 b! p' m
<button class=btn_2k3 title="好看的按鈕">好看的按鈕</button>) u7 E. _; N1 n: I$ m
</body>
( x9 w( k* n$ W! a2 I- v
</html>

複製代碼

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

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

相關帖子