console
<div>
<a class="btn1 btn1_primary big">最初按钮</a>
<a class="btn1 big">默认按钮</a>
<a class="btn1 btn1_ big">草绿按钮</a>
<a class="btn1 btn1_wram small">暖色按钮</a>
<a class="btn1 btn1_danger small">警告按钮</a>
<a class="btn1_disabled small">禁用按钮</a>
</div>
.btn1{
font-size: 14px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: #fff;
background-color: #00a3cf;
border: 1px solid #008fb5;
border-color: #00abd9 #008fb5 #008fb5 #00abd9;
box-shadow: 1px 1px 2px #eeeeee;
display: inline-block;
cursor: pointer;
text-align: center;
background: -webkit-linear-gradient(#fff -6%, #73cde5 6%, #00a3cf 100%);
background: -moz-linear-gradient(#fff -6%, #73cde5 6%, #00a3cf 100%);
background: linear-gradient(#fff -6%, #73cde5 6%, #00a3cf 100%);
-pie-background: linear-gradient(#fff 1%, #73cde5 6%, #00a3cf 100%);
behavior: url(../js/PIE.htc)\9;
vertical-align: middle;
overflow:hidden;
margin:0 3px;
+padding:0px;
position:relative\9;
}
.btn1:hover{
color:#fff;
background: -webkit-linear-gradient(#fff -6%, #73cde5 6%, #008fb5 94%, #73cde5 100%);
background: -moz-linear-gradient(#fff -6%, #73cde5 6%, #008fb5 94%, #73cde5 100%);
background: linear-gradient(#fff -6%, #73cde5 6%, #008fb5 94%, #73cde5 100%);
-pie-background:linear-gradient(#fff 1%, #73cde5 6%, #008fb5 94%, #73cde5 100%);
behavior: url(../js/PIE.htc)\9;
}
.big{
height: 30px;
line-height:28px;
padding: 0 16px;
}
.small{
height: 22px;
line-height:20px;
padding: 0 4px;
}
.btn1_primary{
background-color: #e6e6e5;
border: 1px solid #e1e1e1;
border-color: #e1e1e1 #e1e1e1 #c1c2c1 #e1e1e1;
box-shadow: 1px 1px 2px #eeeeee;
background: -webkit-linear-gradient(#fff -6%, #f6f6f6 6%, #e0e0e0 100%);
background: -moz-linear-gradient(#fff -6%, #f6f6f6 6%, #e0e0e0 100%);
background: linear-gradient(#fff -6%, #f6f6f6 6%, #e0e0e0 100%);
-pie-background: linear-gradient(#fff 1%, #f6f6f6 6%, #e0e0e0 100%);
color:#666;
}
.btn1_primary:hover{
color:#666;
background: -webkit-linear-gradient(#fff -6%, #fafeff 6%, #c9c9c9 95%, #fafeff 100%);
background: -moz-linear-gradient(#fff -6%, #fafeff 6%, #c9c9c9 95%, #fafeff 100%);
background: linear-gradient(#fff -6%, #fafeff 6%, #c9c9c9 95%, #fafeff 100%);
-pie-background: linear-gradient(#fff 1%, #fafeff 6%, #c9c9c9 95%, #fafeff 100%);
behavior: url(../js/PIE.htc)\9;
}
.btn1_{
background-color: #00cc44;
border: 1px solid #1c5d32;
border-color: #2da355 #2da355 #569e6e #2da355;
box-shadow: 1px 1px 2px #eeeeee;
background: -webkit-linear-gradient(#fff -6%, #6ae593 6%, #23c559 100%);
background: -moz-linear-gradient(#fff -6%, #6ae593 6%, #23c559 100%);
background: linear-gradient(#fff -6%, #6ae593 6%, #23c559 100%);
-pie-background: linear-gradient(#fff 1%, #6ae593 6%, #23c559 100%);
}
.btn1_:hover{
background: -webkit-linear-gradient(#fff -6%, #6ae593 6%, #1faa4d 94%, #6ae593 100%);
background: -moz-linear-gradient(#fff -6%, #6ae593 6%, #1faa4d 94%, #6ae593 100%);
background: linear-gradient(#fff -6%, #6ae593 6%, #1faa4d 94%, #6ae593 100%);
-pie-background: linear-gradient(#fff 1%, #6ae593 6%, #1faa4d 94%, #6ae593 100%);
behavior: url(../js/PIE.htc)\9;
color:#fff;
}
.btn1_wram{
background-color: #ff9f19;
border: 1px solid #bd8b44;
border-color: #bd8b44 #bd8b44 #a67839 #bd8b44;
box-shadow: 1px 1px 2px #eeeeee;
background: -webkit-linear-gradient(#fff -6%, #e37e66 6%, #ff9f19 100%);
background: -moz-linear-gradient(#fff -6%, #e7b773 6%, #ff9f19 100%);
background: linear-gradient(#fff -6%, #e7b773 6%, #ff9f19 100%);
-pie-background: linear-gradient(#fff 1%, #e7b773 6%, #ff9f19 100%);
}
.btn1_wram:hover{
background: -webkit-linear-gradient(#fff -6%, #e7b773 6%, #e19428 100%, #e7b773 100%);
background: -moz-linear-gradient(#fff -6%, #e7b773 6%, #e19428 100%, #e7b773 100%);
background: linear-gradient(#fff -6%, #e7b773 6%, #e19428 100%, #e7b773 100%);
-pie-background: linear-gradient(#fff 1%, #e7b773 6%, #e19428 100%, #e7b773 100%);
behavior: url(../js/PIE.htc)\9;
color:#fff;
}
.btn1_danger{
background-color: #ff4c23;
border: 1px solid #d54524;
border-color: #d54524 #d54524 #b92f0f #d54524;
box-shadow: 1px 1px 2px #eeeeee;
background: -webkit-linear-gradient(#fff -6%, #e37e66 6%, #ff4c23 100%);
background: -moz-linear-gradient(#fff -6%, #e37e66 6%, #ff4c23 100%);
background: linear-gradient(#fff -6%, #e37e66 6%, #ff4c23 100%);
-pie-background: linear-gradient(#fff 1%, #e37e66 6%, #ff4c23 100%);
}
.btn1_danger:hover{
background: -webkit-linear-gradient(#fff -6%, #e37e66 6%, #d44220 100%, #e37e66 100%);
background: -moz-linear-gradient(#fff -6%, #e37e66 6%, #d44220 100%, #e37e66 100%);
background: linear-gradient(#fff -6%, #e37e66 6%, #d44220 100%, #e37e66 100%);
-pie-background: linear-gradient(#fff 1%, #e37e66 6%, #d44220 100%, #e37e66 100%);
behavior: url(../js/PIE.htc)\9;
color:#fff;
}
.btn1_disabled{
font-size: 14px;
-webkit-border-radius: 4px;
border-radius: 4px;
display: inline-block;
cursor: pointer;
text-align: center;
vertical-align: middle;
overflow:hidden;
margin:0 3px;
+padding:0px;
position:relative\9;
background-color: #e4e4e4;
border: 1px solid #e1e1e1;
border-color: #e1e1e1 #e1e1e1 #c1c2c1 #e1e1e1;
box-shadow: 1px 1px 2px #eeeeee;
background: -webkit-linear-gradient(#fff -6%, #f6f6f6 6%, #e4e4e4 100%);
background: -moz-linear-gradient(#fff -6%, #f6f6f6 6%, #e4e4e4 100%);
background: linear-gradient(#fff -6%, #f6f6f6 6%, #e4e4e4 100%);
-pie-background: linear-gradient(#fff 1%, #f6f6f6 6%, #e4e4e4 100%);
color:#666;
cursor: not-allowed;
}
.btn1_disabled:hover{
color:#666;
}