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