彩色CSS按钮 – 筚路蓝缕

<style>.btn {
	BORDER-RIGHT:#7b9ebd 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#7b9ebd 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#cecfde);
	BORDER-LEFT:#7b9ebd1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#7b9ebd 1px solid
}
.btn1_mouseout {
	BORDER-RIGHT:#7EBF4F 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#7EBF4F 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#B3D997);
	BORDER-LEFT:#7EBF4F1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#7EBF4F 1px solid
}
.btn1_mouseover {
	BORDER-RIGHT:#7EBF4F 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#7EBF4F 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#CAE4B6);
	BORDER-LEFT:#7EBF4F1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#7EBF4F 1px solid
}
.btn2 {
	padding:2 4 04;
	font-size:12px;
	height:23;
	background-color:#ece9d8;
	border-width:1;
}
.btn3_mouseout {
	BORDER-RIGHT:#2C59AA 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#2C59AA 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5);
	BORDER-LEFT:#2C59AA1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#2C59AA 1px solid
}
.btn3_mouseover {
	BORDER-RIGHT:#2C59AA 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#2C59AA 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#D7E7FA);
	BORDER-LEFT:#2C59AA1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#2C59AA 1px solid
}
.btn3_mousedown {
	BORDER-RIGHT:#FFE400 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#FFE400 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5);
	BORDER-LEFT:#FFE4001px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#FFE400 1px solid
}
.btn3_mouseup {
	BORDER-RIGHT:#2C59AA 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#2C59AA 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5);
	BORDER-LEFT:#2C59AA1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#2C59AA 1px solid
}
.btn_2k3 {
	BORDER-RIGHT:#002D96 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#002D96 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFFF,EndColorStr=#9DBCEA);
	BORDER-LEFT:#002D961px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM: #002D96 1px solid
}
</style>
<body>
<button class='btn'>Button</button>
<p>
</p>
<button class='btn1_mouseout' onmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'">Button</button>
<button class='btn1_mouseout' onmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'" disabled>Button</button>
<p>
	<button class='btn2'>Button</button>
</p>
<p>
	<button class='btn3_mouseoutonmouseover="this.className='btn3_mouseover'"onmouseout="this.className='btn3_mouseout'"onmousedown="this.className='btn3_mousedown'"onmouseup="this.className='btn3_mouseup'"' onclick="this.blur();">Button</button>
</p>
<p>
	<button class='btn_2k3'>2k3 Button</button>
</p>
</body>
一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31
发表回复 取消回复

相关文章

发表回复取消回复
