rgui-css-standard/src/button/demo/index.md

Regular UI - Standard CSS Components

## 示例
### 基本形式

在`<button>`、`<a>`或`<input>`标签上使用`.u-btn`，三者样式完全一致。

<div class="m-example"></div>

```html
<button class="u-btn">Button</button>
<a class="u-btn">Link</a>
<a class="u-btn" href="#">Link#</a>
<input class="u-btn" type="button" value="Input">
<input class="u-btn" type="submit" value="Submit">
```

### 颜色扩展

<div class="m-example"></div>

```html
<button class="u-btn">Default</button>
<button class="u-btn u-btn-primary">Primary</button>
<button class="u-btn u-btn-info">Info</button>
<button class="u-btn u-btn-success">Success</button>
<button class="u-btn u-btn-warning">Warning</button>
<button class="u-btn u-btn-error">Error</button>
```

### 尺寸扩展

<div class="m-example"></div>

```html
<button class="u-btn u-btn-xs">Extra Small</button>
<button class="u-btn u-btn-sm">Small</button>
<button class="u-btn">Normal</button>
<button class="u-btn u-btn-lg">Large</button>
<button class="u-btn u-btn-xl">Extra Large</button>

<p></p>

<button class="u-btn u-btn-primary u-btn-xs">Extra Small</button>
<button class="u-btn u-btn-primary u-btn-sm">Small</button>
<button class="u-btn u-btn-primary">Normal</button>
<button class="u-btn u-btn-primary u-btn-lg">Large</button>
<button class="u-btn u-btn-primary u-btn-xl">Extra Large</button>
```

### 禁用

<div class="m-example"></div>

```html
<button class="u-btn z-dis">Disabled</button>
<a class="u-btn z-dis">Link</a>
<button class="u-btn u-btn-primary" disabled>Button</button>
<input class="u-btn u-btn-success" type="button" value="Input" disabled>
<input class="u-btn u-btn-error" type="submit" value="Submit" disabled>
```

### 整行

<div class="m-example"></div>

```html
<button class="u-btn u-btn-primary u-btn-block">Block</button>
<p></p>
<a class="u-btn u-btn-block">Link</a>
<p></p>
<input class="u-btn u-btn-lg u-btn-block" type="button" value="Large Input">
```