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

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

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

2 \. B) S! e' }8 j3 } u% S7 ^
<html>
. | I1 W; ^) A3 e# I
<head>
$ d6 R# } u9 T, k% v
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">9 A. X* ~' ?, v6 F
<title>CSS實現的幾個非常漂亮的按鈕</title>
' m; z" F0 r1 D2 u. x
<style>
" X$ `; l+ D0 o7 R# E$ f# M
.btn {2 f/ j. D% X0 J% g
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 solid1 T f/ l$ E. z+ b( ~2 I- Z; v( M
}6 `+ B+ E/ e* t! T$ v; Z$ H" q
.btn1_mouseout {. z, s& n. O" k; P) I
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 solid5 w+ _7 g7 j7 l( u5 b
}5 L2 l2 i- ?% \, B. f1 I
.btn1_mouseover {6 _# t8 i2 e" w
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 solid4 F! c$ E0 X6 Q. U! j3 }8 X; ^/ A: q" M
}
$ e. @- \5 x q
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;} H) Q( y% }# N: W. T
.btn3_mouseout {0 e y2 D1 r# K! 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=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid. ]/ e% U8 ~, J- f
}
! Y* ~+ P% Z" n; l4 Y% E- H" ^4 z
.btn3_mouseover {% e) q" w' K. H0 v$ k
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 S" |8 |' \, B3 m/ w
}
2 m2 L( \ E3 H' T
.btn3_mousedown
' w- k$ T3 ?$ q+ G0 o$ n' i
{0 J6 h7 T6 I3 k6 m m
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
3 A7 @0 ], }9 s$ \3 }+ {
}: f3 G. ^2 x3 P& M0 x
.btn3_mouseup {
8 V6 d3 J! e7 v; G+ J: i
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
2 c( [5 c! d" o: f7 o
}
6 M; Z/ b' ~: y( U
.btn_2k3 {
" w3 V; t5 k; {( x7 g7 Q; V
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
% S& y2 N H0 ?% {
}
! T" g+ _+ L# c9 |* B1 g8 j
</style>: x1 A# B, f+ ~
</head>
# k" Z7 Y4 c6 V$ X# s( e) h
<body>8 O7 Z: L2 e$ i3 m. q
<button class=btn title="好看的按鈕">好看的按鈕</button><P>
9 b9 l p, i; D# O3 E) ?' B
<button
, Y% Z" d; J; I" p; R) o
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
* g- }: D* p& n6 h C y7 j6 I
onmouseout="this.className='btn1_mouseout'"3 h1 R% M. M# j$ U5 s
title="好看的按鈕">好看的按鈕</button>& ^5 h5 H. K) |5 P% J+ _4 v
<P>
+ v4 }9 S) L U; ~( q0 G
<button. | X$ W" C& h$ X$ Z4 {
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
) V9 S3 D1 N, ^- {
onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按鈕</button>
! W x" q& x7 @
<P>. ^- ~# z N' W
<button class=btn2 title="好看的按鈕">好看的按鈕</button>
' g8 C3 f2 {) r3 D- d
<P>
. M3 T7 h0 A/ i( i/ D( @
<button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"9 g' E* z: ^( ]
onmouseout="this.className='btn3_mouseout'"1 D- x: T& T+ D" a8 ~9 e
onmousedown="this.className='btn3_mousedown'"
4 \8 o, I9 d# \
onmouseup="this.className='btn3_mouseup'"
# c* K" G$ x1 k9 g# t
title="好看的按鈕">好看的按鈕</button>
6 N2 s, w/ J2 b. l3 [. D5 o( H& M
<P> W( `0 X( C3 I5 p2 P' }& t N+ ?
<button class=btn_2k3 title="好看的按鈕">好看的按鈕</button>
9 o, x/ E$ A) S
</body>1 q" p- U4 R9 X5 g( n, l. h! {, W
</html>

複製代碼

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

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

相關帖子

瀏覽過的版塊