# button

---

全站通用按钮组件，无图片纯 css 实现，IE8 以下无圆角。

可以很方便的和 alice.iconfont 配合使用。

---

<link type="text/css" rel="stylesheet" media="screen" href="https://a.alipayobjects.com/al/alice.components.ui-button-orange-1.3-src.css">
<link type="text/css" rel="stylesheet" media="screen" href="src/button.css">
<link type="text/css" rel="stylesheet" media="screen" href="src/ui-button-orange.css">
<link type="text/css" rel="stylesheet" media="screen" href="src/ui-button-white.css">
<link type="text/css" rel="stylesheet" media="screen" href="src/ui-button-disable.css">
<link type="text/css" rel="stylesheet" media="screen" href="src/ui-button-blue.css">
<style>
a { color: #08c; }
a:hover { color: #000; }
a:active { color: #f60; }
</style>

## 演示

### 橙色按钮 a

````html
<a href="javascript:;" class="ui-button ui-button-lorange">橙色大按钮</a>
<a href="javascript:;" class="ui-button ui-button-morange">橙色中按钮</a>
<a href="javascript:;" class="ui-button ui-button-sorange">橙色小按钮</a>
````

### 橙色按钮 input

````html
<input type="button" class="ui-button ui-button-lorange" value="橙色大按钮">
<input type="button" class="ui-button ui-button-morange" value="橙色中按钮">
<input type="button" class="ui-button ui-button-sorange" value="橙色小按钮">
````

### 橙色按钮 button

````html
<button class="ui-button ui-button-lorange">橙色大按钮</button>
<button class="ui-button ui-button-morange">橙色中按钮</button>
<button class="ui-button ui-button-sorange">橙色小按钮</button>
````

### 白色按钮 a

````html
<a href="javascript:;" class="ui-button ui-button-lwhite">白色大按钮</a>
<a href="javascript:;" class="ui-button ui-button-mwhite">白色中按钮</a>
<a href="javascript:;" class="ui-button ui-button-swhite">白色小按钮</a>
````

### 白色按钮 input

````html
<input type="button" class="ui-button ui-button-lwhite" value="白色大按钮">
<input type="button" class="ui-button ui-button-mwhite" value="白色中按钮">
<input type="button" class="ui-button ui-button-swhite" value="白色小按钮">
````

### 白色按钮 button

````html
<button class="ui-button ui-button-lwhite">白色大按钮</button>
<button class="ui-button ui-button-mwhite">白色中按钮</button>
<button class="ui-button ui-button-swhite">白色小按钮</button>
````

### 不可用按钮 a

````html
<a href="javascript:;" class="ui-button ui-button-ldisable">灰色大按钮</a>
<a href="javascript:;" class="ui-button ui-button-mdisable">灰色中按钮</a>
<a href="javascript:;" class="ui-button ui-button-sdisable">灰色小按钮</a>
````

### 不可用按钮 input

````html
<input type="button" class="ui-button ui-button-ldisable" value="灰色大按钮">
<input type="button" class="ui-button ui-button-mdisable" value="灰色中按钮">
<input type="button" class="ui-button ui-button-sdisable" value="灰色小按钮">
````

### 不可用按钮 button

````html
<button class="ui-button ui-button-ldisable">灰色大按钮</button>
<button class="ui-button ui-button-mdisable">灰色中按钮</button>
<button class="ui-button ui-button-sdisable">灰色小按钮</button>
````

### 蓝色按钮 a

````html
<a href="javascript:;" class="ui-button ui-button-lblue">蓝色大按钮</a>
<a href="javascript:;" class="ui-button ui-button-mblue">蓝色中按钮</a>
<a href="javascript:;" class="ui-button ui-button-sblue">蓝色小按钮</a>
````

### 蓝色按钮 input

````html
<input type="button" class="ui-button ui-button-lblue" value="蓝色大按钮">
<input type="button" class="ui-button ui-button-mblue" value="蓝色中按钮">
<input type="button" class="ui-button ui-button-sblue" value="蓝色小按钮">
````

### 蓝色按钮 button

````html
<button class="ui-button ui-button-lblue">蓝色大按钮</button>
<button class="ui-button ui-button-mblue">蓝色中按钮</button>
<button class="ui-button ui-button-sblue">蓝色小按钮</button>
````