按鈕 · Frozen UI

[TOC] ## 按鈕 btn ### 普通小按鈕 ![](https://box.kancloud.cn/ff619201d71974e30a50a012fe33b7ea_278x141.png) ~~~ <div class="ui-btn-wrap"> <button class="ui-btn-s"> 確定 </button> <button class="ui-btn-s active"> 確定 </button> <button class="ui-btn-s disabled"> 取消 </button> <button class="ui-btn-s" disabled> 取消 </button> </div> ~~~ ### 普通按鈕 ![](https://box.kancloud.cn/764e2bea806b3887c67a4721ddbd71d6_247x147.png) ~~~ <div class="ui-btn-wrap"> <button class="ui-btn"> 確定 </button> <button class="ui-btn active"> 確定 </button> <button class="ui-btn" disabled> 取消 </button> </div> ~~~ ### 帶進度的按鈕 ![](https://box.kancloud.cn/40e5f340d16a8a8b35e1f1b662207dc0_267x147.png) ~~~ <div class="ui-btn-wrap"> <button class="ui-btn ui-btn-progress">確定</button> <button class="ui-btn ui-btn-progress"> <span>50%</span> <span class="ui-btn-inner" style="width:50%"><span>50%</span></span> </button> <button class="ui-btn ui-btn-progress" disabled>取消</button> </div> ~~~ ### 藍色按鈕 ![](https://box.kancloud.cn/4ae2d2944a37650309299ad1b59b1188_235x147.png) ~~~ <div class="ui-btn-wrap"> <button class="ui-btn ui-btn-primary"> 確定 </button> <button class="ui-btn ui-btn-primary active"> 確定 </button> <button class="ui-btn ui-btn-primary" disabled> 取消 </button> </div> ~~~ ### 紅色按鈕 ![](https://box.kancloud.cn/7ebd41426c0f4eecc8507f0dd38e0fe5_247x148.png) ~~~ <div class="ui-btn-wrap"> <button class="ui-btn ui-btn-danger"> 確定 </button> <button class="ui-btn ui-btn-danger active"> 確定 </button> <button class="ui-btn ui-btn-danger" disabled> 取消 </button> </div> ~~~ ### 普通大按鈕 ![](https://box.kancloud.cn/47f9f42255cdd5ae349137fb2a19a424_405x308.png) ~~~ <div class="ui-btn-wrap"> <button class="ui-btn-lg"> 確定 </button> </div> <div class="ui-btn-wrap"> <button class="ui-btn-lg active"> 確定 </button> </div> <div class="ui-btn-wrap"> <button class="ui-btn-lg disabled"> 取消 </button> </div> ~~~ ### 藍色大按鈕 ![](https://box.kancloud.cn/ca1bff140fc07bc1fdf191be88d3399a_407x304.png) ~~~ <div class="ui-btn-wrap"> <button class="ui-btn-lg ui-btn-primary"> 確定 </button> </div> <div class="ui-btn-wrap"> <button class="ui-btn-lg ui-btn-primary active"> 確定 </button> </div> <div class="ui-btn-wrap"> <button class="ui-btn-lg ui-btn-primary" disabled> 取消 </button> </div> ~~~ ### 紅色大按鈕 ![](https://box.kancloud.cn/a2498d5a9bf9673bcf167c891ae40540_405x306.png) ~~~ <div class="ui-btn-wrap"> <button class="ui-btn-lg ui-btn-danger"> 確定 </button> </div> <div class="ui-btn-wrap"> <button class="ui-btn-lg ui-btn-danger active"> 確定 </button> </div> <div class="ui-btn-wrap"> <button class="ui-btn-lg ui-btn-danger" disabled> 取消 </button> </div> ~~~ ### 普通按鈕組 ![](https://box.kancloud.cn/e93f28eac9b9501171e7baca7bc59e73_401x131.png) ~~~ <div class="ui-btn-group"> <button class="ui-btn-lg"> 拒絕 </button> <button class="ui-btn-lg"> 拒絕 </button> <button class="ui-btn-lg ui-btn-primary"> 同意 </button> </div> ~~~ ### 底部按鈕組 ![](https://box.kancloud.cn/beb23b37525069e221cb85ff931332f1_428x104.png) ~~~ <div class="ui-footer ui-footer-stable ui-btn-group ui-border-t"> <button class="ui-btn-lg"> 拒絕 </button> <button class="ui-btn-lg"> 拒絕 </button> <button class="ui-btn-lg ui-btn-primary"> 同意 </button> </div> ~~~