彩色CSS按钮 – 筚路蓝缕

&lt;style&gt;.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
}
&lt;/style&gt;
&lt;body&gt;
&lt;button class='btn'&gt;Button&lt;/button&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;button class='btn1_mouseout' onmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'"&gt;Button&lt;/button&gt;
&lt;button class='btn1_mouseout' onmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'" disabled&gt;Button&lt;/button&gt;
&lt;p&gt;
	&lt;button class='btn2'&gt;Button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
	&lt;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();"&gt;Button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
	&lt;button class='btn_2k3'&gt;2k3 Button&lt;/button&gt;
&lt;/p&gt;
&lt;/body&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

<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>

2025 年 7 月
一	二	三	四	五	六	日
	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

发表回复 取消回复

相关文章

发表回复取消回复