CoolBtn，完美的按钮风格！
CoolBtn，完美的按钮风格！
CoolBtn Css代码
/*Cool Button*/
.cBtn {
font-size: 1.6rem;
font-weight: 400;
transition:all 0.3s;
cursor: pointer;
line-height: 22px;
line-height: 18px;
border: 1px solid #d6d6d6;
font-size: 14px;
padding: 4px 8px;
display: inline-block;
text-align: center;
color: #666 !important;
background-color: #f0f0f0;
border-radius:3px;
}
.cBtn:hover {/*默认方案*/
background-color: #fff;
}
.cBtn.big{padding:8px 30px!important;}
/*配色方案*/
.cBtn.b,.cBtn.b2,.cBtn.g,.cBtn.o,.cBtn.r {
border:0px;
color:#fff!important;
}
.cBtn.b {
background-color:#0f9ae0!important;
}
.cBtn.b:hover {
background-color: #19a7f0!important;
}
.cBtn.g {
background-color:#429842!important;
}
.cBtn.g:hover {
background-color: #4aaa4a!important;
}
.cBtn.o {
background-color:#e0690c!important;
}
.cBtn.o:hover {
background-color:#c85e0b!important;
}
.cBtn.r {
background-color:#d7342e!important;
}
.cBtn.r:hover {
background-color:#c62b26!important;
}
CoolBtn在页面中的使用：
演示（小按钮）：
代码：
<a class="cBtn">默认风格</a>
<a class="cBtn b">蓝色风格</a>
<a class="cBtn g">绿色风格</a>
<a class="cBtn o">橙色风格</a>
<a class="cBtn r">红色风格</a>
演示（大按钮）：
代码：
<a class="cBtn big">默认风格</a>
<a class="cBtn b big">蓝色风格</a>
<a class="cBtn g big">绿色风格</a>
<a class="cBtn o big">橙色风格</a>
<a class="cBtn r big">红色风格</a>
