PC-application/css/button.ui.css

/* buttons
-----------------------------------------------------------------------------*/
.c-btn , .c-btn-full , .c-btn-large , .c-btn-big , .c-btn-small , .c-btn-tiny , .c-btn-screenful , .c-btn-icon , .c-btn-label , .c-btn-label-l , .c-btn-label-r {display:inline-block; vertical-align:baseline; outline:none; cursor:pointer; border:0; background:none; text-align:center; text-decoration:none; padding:12px 34px; color:#fff; position:relative; font: 14px/1 \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53; line-height:normal !important; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.c-btn:hover , .c-btn:active {text-decoration:none;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in; transition:all 0.3s ease-in;}
.c-btn-full {width:100%; height:100%; vertical-align:middle;}
.c-btn-large {padding:14px 40px; font-size:18px;}
.c-btn-big {padding:10px 40px; font-size:16px;}
.c-btn-small {padding:10px 18px; font-size:12px;}
.c-btn-tiny {padding:6px 10px; font-size:12px;}
.c-btn-disable {cursor:default; background:#ccc; border:0; color:#fff;}
.c-btn-disable:hover,.c-btn-disable:active {background-color:#ccc; top:0;}
.c-btn-screenful , .c-btn-label-l , .c-btn-label-r {width:100%; height:100%; display:table; padding:0; font-size:inherit;}
.c-btn-screenful .c-btn-span , .c-btn-label-l .c-btn-span , .c-btn-label-r .c-btn-span{display:table-cell; vertical-align:middle;}
.c-btn-icon .iconfont , .c-btn-icon .icon{margin-right:7px;}
.c-btn.c-btn-arc , .c-btn-full.c-btn-arc , .c-btn-large.c-btn-arc , .c-btn-big.c-btn-arc , .c-btn-small.c-btn-arc , .c-btn-tiny.c-btn-arc , .c-btn-screenful.c-btn-arc , .c-btn-icon.c-btn-arc , .c-btn-label.c-btn-arc , .c-btn-label-l.c-btn-arc  , .c-btn-label-r.c-btn-arc {border-radius:1000px;}
.c-btn.c-btn-radius , .c-btn-full.c-btn-radius , .c-btn-large.c-btn-radius , .c-btn-big.c-btn-radius , .c-btn-small.c-btn-radius , .c-btn-tiny.c-btn-radius , .c-btn-screenful.c-btn-radius , .c-btn-icon.c-btn-radius , .c-btn-label.c-btn-radius , .c-btn-label-l.c-btn-radius  , .c-btn-label-r.c-btn-radius {border-radius:6px;}
.c-btn.c-btn-rounded , .c-btn-full.c-btn-rounded , .c-btn-large.c-btn-rounded , .c-btn-big.c-btn-rounded , .c-btn-small.c-btn-rounded , .c-btn-tiny.c-btn-rounded , .c-btn-screenful.c-btn-rounded , .c-btn-icon.c-btn-rounded , .c-btn-label.c-btn-rounded , .c-btn-label-l.c-btn-rounded  , .c-btn-label-r.c-btn-rounded{border-radius:2px;}
.c-btn-label {position:relative}
.c-btn-label-l i.iconfont , .c-btn-label-r i.iconfont , .c-btn-label-l i.icon , .c-btn-label-r i.icon {padding:0 6px; display:inline-block; position:absolute; top:0; height:100%; line-height:200%; background:rgba(0,0,0,.04)}
.c-btn-label-l i.iconfont , .c-btn-label-l i.icon {left:0;}
.c-btn-label-r i.iconfont , .c-btn-label-r i.icon {right:0;}
.c-btn-label:hover i.iconfont , .c-btn-label-l:hover i.iconfont , .c-btn-label-r:hover i.iconfont {background:rgba(0,0,0,.1);}
.c-btn-087eff { background-color: #087eff; }
.c-btn-087eff:hover { background-color: #0771e5; }
.c-btn-588cd5 { background-color: #588cd5; }
.c-btn-588cd5:hover { background-color: #4680d0; }
.c-btn-37a6ec { background-color: #37a6ec; }
.c-btn-37a6ec:hover { background-color: #3195d4; }
.c-btn-4dcd70 { background-color: #4dcd70; }
.c-btn-4dcd70:hover { background-color: #45b865; }
.c-btn-4db944 { background-color: #4db944; }
.c-btn-4db944:hover { background-color: #45a63d; }
.c-btn-309765 { background-color: #309765; }
.c-btn-309765:hover { background-color: #2b885b; }
.c-btn-ff9600 { background-color: #ff9600; }
.c-btn-ff9600:hover { background-color: #e58700; }
.c-btn-ff8100 { background-color: #ff8100; }
.c-btn-ff8100:hover { background-color: #e57400; }
.c-btn-fc6155 { background-color: #fc6155; }
.c-btn-fc6155:hover { background-color: #e2574c; }
.c-btn-ff3b2f { background-color: #ff3b2f; }
.c-btn-ff3b2f:hover { background-color: #e5352a; }
.c-btn-f9f9f9 { background-color: #f9f9f9; color: #087eff; border: #c0c0bc 1px solid; }
.c-btn-f9f9f9:hover { background-color: #e0e0e0; }
.c-btn-ffffff { background-color: #ffffff; color: #4dcd70; border: #e1e1e1 1px solid; }
.c-btn-ffffff:hover { background-color: #e5e5e5; }
.c-btn-fff { background-color: #ffffff; color: #999999; border: #e1e1e1 1px solid; }
.c-btn-fff:hover { background-color: #e5e5e5; }
.c-btn-ff3 { background-color: #ffffff; color: #ff3b2d; border: #e1e1e1 1px solid; }
.c-btn-ff3:hover { background-color: #e5e5e5; }