## mo-button
> 按钮类。
每个类均可单独使用,样式类(包括圆角)和尺寸类可混用 (如需要添加一个大尺寸的主色调按钮则需要使用 `class="mo-button--primary mo-button--large"`混合使用)。
如果要禁用按钮,只需要给按钮添加`disabled`属性
### api
| className | 描述 | 备注 |
| --- | --- | --- |
| `mo-button` | 默认样式 | `height: 34px` |
| `mo-button--primary` | 主色调 | `#0275d8` |
| `mo-button--negative` | 消极色 | `#5cb85c` |
| `mo-button--positive` | 积极色 | `#d9534f` |
| `mo-button--fluid` | 自适应宽度 | `width:100%` |
| `mo-button--radius` | 小圆角 | `border-radius: 2px` |
| `mo-button--pill` | 大圆角 | `border-radius: 200px` |
| `mo-button--small` | 小尺寸 | `height: 30px` |
| `mo-button--large` | 大尺寸 | `height: 44px` |
| `mo-button--link` | 按钮式链接 | 无边框和背景色 |
### demo
``` html
<button class="mo-button">default button</button>
<button class="mo-button--primary">primary button</button>
<button class="mo-button--primary mo-button--large">large primary button</button>
<button class="mo-button--primary mo-button--pill">pill primary button</button>
<button class="mo-button--primaryl" disabled>disabled primary button</button>
```
### 自定义按钮
``` scss
@import './mixins/button';
//自定义样式(背景,颜色)
.mo-button--[style] {
@include buttonStyle($border, $background, $color, $hoverBorder, $hoverBackground, $hoverColor);
}
//自定义尺寸
$my-button-size : (font-size:14px, line-height:1.4286, padding-y:6px, padding-x:16px) !default;
.mo-button--[size] {
@include buttonSize ($my-button-size );
}
```