#### 基本用法:
![](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>
```