好看的原创按钮样式－七彩课堂·七彩空间

七彩课堂[企业建站知识系列]

好看的原创按钮样式

<style>
input {
font-family: "Tahoma", "Arial", "sans-serif";
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
text-decoration: none;
background-color:#FFFFFF;
border-color: #aecde7;
border-style: solid;
border-width: 1px;
padding-top: 1px;
}
input.button {
height: 20px; padding-top: 0px;
border: 1px solid #AECDE7;
border-top: 1px solid #AECDE7;
border-left: 4px solid #AECDE7;
background-color: #FFFFFF;
}

button{
font-size: 12px;
height: 20px;
padding-top: 2px;
border: 1px solid #AECDE7;
border-top: 1px solid #AECDE7;
border-left: 4px solid #AECDE7;
background-color: #FFFFFF;
}
</style>
<input type="text" name="T1" size="20"><br>
<input type="submit" value="用户登录" name="B1" class="button"><br>
<input type="reset" value="重置" name="B2" class="button">

<style>
.btn1{border-color:#3568CC;border-top-width:0px;border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px;}
</style>
<input type="text" name="T1" size="10" class="btn1">

<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: #7b9ebd 1px 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: #7EBF4F 1px 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: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn2 {padding: 2 4 0 4;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: #2C59AA 1px 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: #2C59AA 1px 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: #FFE400 1px 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: #2C59AA 1px 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: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid
}
</style>
</head>
<body>
<button class=btn title="这是CSDN的官方按钮">好看的CSDN Button</button><P></p>
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'"
title="这是原创按钮"
> 好看的Green Button</button>  
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'" DISABLED
> 好看的Green Button</button>
<P>
<button class=btn2 title="这是e商官方按钮"> 好看的 Button</button>
<P>
<button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
title="这是原创按钮"
> 好看的QQ Button</button>
<P>
<button class=btn_2k3 title="这是原创按钮"> 好看的 2k3 Button</button>

<style>
input{
border: 3px double #7BC76B;
height: 22px;
width: 60px;
background-color: #F2F2F2;
font-size: 12px;
padding-top: 1px;
cursor: hand;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997);
}
</style>
<input name="username" type="text" id="username" size="17" maxlength="17">
<input type="button" name="Submit" value="下一步">

信息推荐

资讯中心 | 电子商务 | 搜索营销 | 设计学院 | 中医养生 | 养生保健 | 节日祝福 | 民俗文化 | 奇闻趣事
建站知识 | 人世百态 | 网站导航 | 传统节日 | 搜索热点 | 星座运势 | 趣闻轶事 | 祝福的话 | 短信大全
© 2023 QicaiSpace.Com