xbtn v1.0
/*example:
*<button class="xbtn-sm xbtn-trans-radius-success">提交</button>
*/
/*===========================================xbtn
*作者：Janing
*日期：2016-9-18
*/
/*===========================================大小*/
[class*="xbtn"]{
height:30px;
line-height:30px;
min-width:80px;
padding:0 5px;
border:1px solid transparent;
transition: all 0.2s ease-in-out 0s;
}
[class*="xbtn"][class*="sm"]{
height:25px;
line-height:25px;
min-width:30px;
}
/*===========================================主题颜色*/
[class*="xbtn"][class*="-success"]{
background:#04be02;
color:#04be02;
border-color:#04be02;
}
[class*="xbtn"][class*="-primary"]{
background:blue;
color:blue;
border-color:blue;
}
[class*="xbtn"][class*="-danger"]{
background:#FF6D6E;
color:#FF6D6E;
border-color:#FF6D6E;
}
[class*="xbtn"][class*="-warming"]{
background:#FF9466;
color:#FF9466;
border-color:#FF9466;
}
[class*="xbtn"][class*="-info"]{
background:#00d5ec;
color:#00d5ec;
border-color:#00d5ec;
}
[class*="xbtn"][class*="-white"]{
background:#fff;
color:#1B1E25;
border-color:rgba(0,0,0,.2);
}
[class*="xbtn"]:hover{
opacity: .8;
}
/*===========================================形状*/
[class*="xbtn"].xbtn-success,[class*="xbtn"].xbtn-info,[class*="xbtn"].xbtn-danger,[class*="xbtn"].xbtn-primary,[class*="xbtn"].xbtn-warming{
color:#fff;
}
[class*="xbtn"][class*="-trans"]{
background:transparent;
}
[class*="xbtn"][class*="-radius"]{
border-radius:5px;
}
[class*="xbtn"][class*="-line"]{
background:transparent;
border-width: 0;
}
[class*="xbtn"][class*="-line"]:hover{
border-bottom:1px solid;
opacity: 1;
}