#### 基本用法: ![](https://box.kancloud.cn/f2a7b10c959a8cc009515b10286d8cc6_897x126.png) 示例代码: ``` <button class="win-btn win-btn-primary">原始按钮</button> <button class="win-btn">默认按钮</button> <button class="win-btn win-btn-normal">百搭按钮</button> <button class="win-btn win-btn-warm">暖色按钮</button> <button class="win-btn win-btn-danger">警告按钮</button> <button class="win-btn win-btn-disabled">禁用按钮</button> ``` ***** #### 不同尺寸: ![](https://box.kancloud.cn/7f8e0c526e85c0818c44da53aa56c6c8_517x69.png) 示例代码: ``` <button class="win-btn win-btn-lg">大型按钮</button> <button class="win-btn">默认按钮</button> <button class="win-btn win-btn-sm">小型按钮</button> <button class="win-btn win-btn-xs">迷你按钮</button> ``` ***** #### 圆角按钮 ![](https://box.kancloud.cn/62a9cc33f1becc814f286d865f1f5c1c_769x58.png) 代码示例: ``` <button class="win-btn win-btn-primary win-btn-radius">原始按钮</button> <button class="win-btn win-btn-radius">默认按钮</button> <button class="win-btn win-btn-normal win-btn-radius">百搭按钮</button> <button class="win-btn win-btn-warm win-btn-radius">暖色按钮</button> <button class="win-btn win-btn-danger win-btn-radius">警告按钮</button> <button class="win-btn win-btn-disabled win-btn-radius">禁用按钮</button> ``` ***** #### 有底无底色图标 ![](https://box.kancloud.cn/916413db0a8d0c8a9ed21bdc1656b35f_639x108.png) 代码示例: ``` <button class="win-btn"> <i class="win-icon win-icon-pause"></i> </button> <button class="win-btn"> <i class="win-icon win-icon-paly"></i> </button> <button class="win-btn"> <i class="win-icon win-icon-left"></i> </button> <button class="win-btn"> <i class="win-icon win-icon-right"></i> </button> <button class="win-btn"> <i class="win-icon win-icon-edit"></i> </button> <button class="win-btn"> <i class="win-icon win-icon-delete"></i> </button> <button class="win-btn"> <i class="win-icon win-icon-share"></i> </button> <br /> <button class="win-btn win-btn-primary"> <i class="win-icon win-icon-pause"></i> </button> <button class="win-btn win-btn-primary"> <i class="win-icon win-icon-paly"></i> </button> <button class="win-btn win-btn-primary"> <i class="win-icon win-icon-left"></i> </button> <button class="win-btn win-btn-primary"> <i class="win-icon win-icon-right"></i> </button> <button class="win-btn win-btn-primary"> <i class="win-icon win-icon-edit"></i> </button> <button class="win-btn win-btn-primary"> <i class="win-icon win-icon-delete"></i> </button> <button class="win-btn win-btn-primary"> <i class="win-icon win-icon-share"></i> </button> ``` ***** #### 图标组 ![](https://box.kancloud.cn/2606eb4412e85225c3291d7cfa979ab1_879x63.png) 代码示例: ``` <div class="win-btn-group"> <button class="win-btn">后退</button> <button class="win-btn">暂停</button> <button class="win-btn">播放</button> <button class="win-btn">前进</button> </div> <div class="win-btn-group"> <button class="win-btn"> <i class="win-icon win-icon-left"></i> </button> <button class="win-btn"> <i class="win-icon win-icon-pause"></i> </button> <button class="win-btn"> <i class="win-icon win-icon-paly"></i> </button> <button class="win-btn"> <i class="win-icon win-icon-right"></i> </button> </div> <div class="win-btn-group"> <button class="win-btn win-btn-primary"> <i class="win-icon win-icon-left"></i> </button> <button class="win-btn win-btn-primary"> <i class="win-icon win-icon-pause"></i> </button> <button class="win-btn win-btn-primary"> <i class="win-icon win-icon-paly"></i> </button> <button class="win-btn win-btn-primary"> <i class="win-icon win-icon-right"></i> </button> </div> ```