Button 按钮

a标签和span标签的按钮

按钮一般用a标签或span标签标示。

a按钮 span按钮

`1`	`<a` `href="###"` `class="ax-btn">a按钮</a>`

`2`	`<span` `class="ax-btn">span按钮</span>`

input标签和button标签的按钮

在表单中通用input或button来作为提交或者重置按钮。input标签和button标签的按钮稍微特别一些，这两个标签在不同浏览器有不同的显示结果，我们已经做了hack处理。

`1`	`<input` `type="submit"` `value="提交submit"` `class="ax-btn">`

`2`	`<button` `type="button"` `class="ax-btn">提交button</button>`

文字按钮

文字按钮存在三种情况，第一种是简单的a标签按钮，第二种是非a标签按钮，第三种是嵌套在其他元素内的a标签按钮。

primary首要 ignore忽略 cancel无效或者取消 error危险 success成功 warning警告 info信息 question疑问图标文字按钮

01<a href="###" class="ax-color-primary">primary首要</a>
02<a href="###" class="ax-color-ignore">ignore忽略</a>
03<a href="###" class="ax-text-cancel">cancel无效或者取消a</a>
04<a href="###" class="ax-color-error">error危险</a>
05<a href="###" class="ax-color-success">success成功</a>
06<a href="###" class="ax-color-warning">warning警告</a>
07<a href="###" class="ax-color-info">info信息</a>
08<a href="###" class="ax-color-question">question疑问</a>
09<span class="ax-color-primary">primary首要</span>
10<span class="ax-color-ignore">ignore忽略</span>
11<span class="ax-text-cancel">cancel无效或者取消</span>
12<span class="ax-color-error">error危险</span>
13<span class="ax-color-success">success成功</span>
14<span class="ax-color-warning">warning警告</span>
15<span class="ax-color-info">info信息</span>
16<span class="ax-color-question">question疑问</span>
17<span class="ax-color-primary"><a href="###">primary首要</a></span>
18<span class="ax-color-ignore"><a href="###">ignore忽略</a></span>
19<span class="ax-text-cancel"><a href="###">cancel无效或者取消</a></span>
20<span class="ax-color-error"><a href="###">error危险</a></span>
21<span class="ax-color-success"><a href="###">success成功</a></span>
22<span class="ax-color-warning"><a href="###">warning警告</a></span>
23<span class="ax-color-info"><a href="###">info信息</a></span>
24<span class="ax-color-question"><a href="###">question疑问</a></span>

带图标的按钮

在按钮中使用图标需要写入图标代码，如下。注意：input的按钮不能使用图标。

a按钮 span按钮

1<a href="###" class="ax-btn"><span class="ax-iconfont ax-icon-star"></span>a按钮</a>
2<span class="ax-btn"><span class="ax-iconfont ax-icon-star"></span>span按钮</span>
3<button type="button" class="ax-btn"><span class="ax-iconfont ax-icon-star"></span>提交button</button>

如果图标在按钮右侧，可在图标标签上加上ax-at-right类。

a按钮 span按钮

1<a href="###" class="ax-btn">a按钮<span class="ax-iconfont ax-icon-star ax-at-right"></span></a>
2<span class="ax-btn">span按钮<span class="ax-iconfont ax-icon-star ax-at-right"></span></span>
3<button type="button" class="ax-btn">提交button<span class="ax-iconfont ax-icon-star ax-at-right"></span></button>

按钮有时会作为打开窗口的目标节点，在使用右侧图标时，给按钮追加ax-opened类可模拟打开窗口效果。

默认效果模拟打开打开dropdown 打开popup

1<a href="###" class="ax-btn">默认效果<span class="ax-iconfont ax-icon-down ax-at-right"></span></a>
2<a href="###" class="ax-btn ax-opened">模拟打开<span class="ax-iconfont ax-icon-down ax-at-right"></span></a>
3<a href="###" class="ax-btn" axDropdown="content:[{label:'中国'},{label:'新加坡'}]">打开dropdown<span class="ax-iconfont ax-icon-down ax-at-right"></span></a>
4<span class="ax-btn" axPopup="content:'伟大的中国'">打开popup<span class="ax-iconfont ax-icon-down ax-at-right"></span></span>
5<button type="button" class="ax-btn" axDialog="content:'伟大的中国'">打开dialog<span class="ax-iconfont ax-icon-down ax-at-right"></span></button>
6<button type="button" class="ax-btn" axDrawer="content:'伟大的中国'">打开drawer<span class="ax-iconfont ax-icon-down ax-at-right"></span></button>

全宽的按钮

对ax-btn使用ax-full类定义全宽按钮，占100%。

a按钮全宽

span按钮全宽

1<a href="###" class="ax-btn ax-full">a按钮全宽</a>
2<span class="ax-btn ax-full">span按钮全宽</span>
3<input type="submit" value="提交submit全宽" class="ax-btn ax-full">
4<button type="button" class="ax-btn ax-full">提交button全宽</button>

全宽的带边距的按钮

ax-margin-left表示左边距，ax-margin-right表示右边距，ax-margin-lr表示左右边距。

a按钮全宽带左边距

span按钮全宽带右边距

1<a href="###" class="ax-btn ax-full ax-margin-left">a按钮全宽带左边距</a>
2<span class="ax-btn ax-full ax-margin-right">span按钮全宽带右边距</span>
3<input type="submit" value="提交submit全宽带边距" class="ax-btn ax-full ax-margin-lr">
4<button type="button" class="ax-btn ax-full ax-margin-lr">提交button全宽带边距</button>

方形的按钮

本框架按钮默认是带3px的圆角，如果不需要圆角可加上ax-square类。

a按钮 span按钮

1<a href="###" class="ax-btn ax-square">a按钮</a>
2<span class="ax-btn ax-square">span按钮</span>
3<input type="submit" value="提交submit" class="ax-btn ax-square">
4<button type="button" class="ax-btn ax-square">提交button</button>

固定宽度的按钮

本框架给按钮定义了3种固定宽度：120px，样式ax-long；200px，样式是ax-longer；240px，样式是ax-longest。

120px-a 120px-span

200px-a 200px-span

240px-a 240px-span

01<a href="###" class="ax-btn ax-long">120px-a</a>
02<span class="ax-btn ax-long">120px-span<</span>
03<input type="submit" value="120px-input" class="ax-btn ax-long">
04<button type="button" class="ax-btn ax-long">120px-button</button>
05<a href="###" class="ax-btn ax-longer">200px-a</a>
06<span class="ax-btn ax-longer">200px-span</span>
07<input type="submit" value="200px-input" class="ax-btn ax-longer">
08<button type="button" class="ax-btn ax-longer">200px-button</button>
09<a href="###" class="ax-btn ax-longest">240px-a</a>
10<span class="ax-btn ax-longest">240px-span</span>
11<input type="submit" value="240px-input" class="ax-btn ax-longest">
12<button type="button" class="ax-btn ax-longest">240px-button</button>

为了照顾视觉体验，小按钮的的固定宽度偏小。分别是80px、120px和180px。ax-xxs和ax-xs尺寸的按钮不适合使用固定宽度！

80px-a 80px-span

120px-a 120px-span

180px-a 180px-span

01<a href="###" class="ax-btn ax-sm ax-long">80px-a</a>
02<span class="ax-btn ax-sm ax-long">80px-span</span>
03<input type="submit" value="80px-input" class="ax-btn ax-sm ax-long">
04<button type="button" class="ax-btn ax-sm ax-long">80px-button</button>
05<div class="ax-break-md"></div>
06<a href="###" class="ax-btn ax-sm ax-longer">120px-a</a>
07<span class="ax-btn ax-sm ax-longer">120px-span</span>
08<input type="submit" value="120px-input" class="ax-btn ax-sm ax-longer">
09<button type="button" class="ax-btn ax-sm ax-longer">120px-button</button>
10<div class="ax-break-md"></div>
11<a href="###" class="ax-btn ax-sm ax-longest">180px-a</a>
12<span class="ax-btn ax-sm ax-longest">180px-span</span>
13<input type="submit" value="180px-input" class="ax-btn ax-sm ax-longest">
14<div class="ax-break-md"></div>
15<button type="button" class="ax-btn ax-sm ax-longest">180px-button</button>

为了照顾视觉体验，大按钮的的固定宽度偏大。分别是160px、240px和280px。

160px-a 160px-span

240px-a 240px-span

280px-a 280px-span

01<a href="###" class="ax-btn ax-lg ax-long">160px-a</a>
02<span class="ax-btn ax-lg ax-long">160px-span</span>
03<input type="submit" value="160px-input" class="ax-btn ax-lg ax-long">
04<button type="button" class="ax-btn ax-lg ax-long">160px-button</button>
05<div class="ax-break-md"></div>
06<a href="###" class="ax-btn ax-lg ax-longer">240px-a</a>
07<span class="ax-btn ax-lg ax-longer">240px-span</span>
08<input type="submit" value="240px-input" class="ax-btn ax-lg ax-longer">
09<button type="button" class="ax-btn ax-lg ax-longer">240px-button</button>
10<div class="ax-break-md"></div>
11<a href="###" class="ax-btn ax-lg ax-longest">280px-a</a>
12<span class="ax-btn ax-lg ax-longest">280px-span</span>
13<input type="submit" value="280px-input" class="ax-btn ax-lg ax-longest">
14<div class="ax-break-md"></div>
15<button type="button" class="ax-btn ax-lg ax-longest">280px-button</button>

其他尺寸的按钮

本框架定义了3种尺寸，默认按钮是高38px；极小按钮是高18px，样式是ax-xxs；特小按钮是高22px，样式是ax-xs；小按钮是高28px，样式是ax-sm；大按钮是高54px，样式是ax-lg。

极小按钮极小按钮极小按钮

特小按钮特小按钮特小按钮

小按钮小按钮小按钮

常规按钮常规按钮常规按钮

大按钮大按钮大按钮

01<a href="###" class="ax-btn ax-xxs">极小按钮</a>
02<a href="###" class="ax-btn ax-xxs"><span class="ax-iconfont ax-icon-star"></span>极小按钮</a>
03<span class="ax-btn ax-xxs">极小按钮</span>
04<input type="submit" value="特小按钮" class="ax-btn ax-xxs">
05<button type="button" class="ax-btn ax-xxs">极小按钮</button>
06<div class="ax-break-md"></div>
07<a href="###" class="ax-btn ax-xs">特小按钮</a>
08<a href="###" class="ax-btn ax-xs"><span class="ax-iconfont ax-icon-star"></span>特小按钮</a>
09<span class="ax-btn ax-xs">特小按钮</span>
10<input type="submit" value="特小按钮" class="ax-btn ax-xs">
11<button type="button" class="ax-btn ax-xs">特小按钮</button>
12<div class="ax-break-md"></div>
13<a href="###" class="ax-btn ax-sm">小按钮</a>
14<a href="###" class="ax-btn ax-sm"><span class="ax-iconfont ax-icon-star"></span>小按钮</a>
15<span class="ax-btn ax-sm">小按钮</span>
16<input type="submit" value="小按钮" class="ax-btn ax-sm">
17<button type="button" class="ax-btn ax-sm">小按钮</button>
18<div class="ax-break-md"></div>
19<a href="###" class="ax-btn">常规按钮</a>
20<a href="###" class="ax-btn"><span class="ax-iconfont ax-icon-star"></span>常规按钮</a>
21<span class="ax-btn">常规按钮</span>
22<input type="submit" value="常规按钮" class="ax-btn">
23<button type="button" class="ax-btn">常规按钮</button>
24<div class="ax-break-md"></div>
25<a href="###" class="ax-btn ax-lg">大按钮</a>
26<a href="###" class="ax-btn ax-lg"><span class="ax-iconfont ax-icon-star"></span>大按钮</a>
27<span class="ax-btn ax-lg">大按钮</span>
28<input type="submit" value="大按钮" class="ax-btn ax-lg">
29<button type="button" class="ax-btn ax-lg">大按钮</button>

实体颜色的按钮

使用ax-btn类定义实体按钮，以ax-*方式定义不同颜色的按钮，本框架共定义了9种颜色按钮，分别是：ax-primary，success，error，warning，info，question，text和ignore。

默认按钮主色按钮默认按钮主色按钮 success error warning

info question ignore ignore black black

01<a href="###" class="ax-btn ">默认按钮</a>
02<a href="###" class="ax-btn ax-primary">主色按钮</a>
03<a href="###" class="ax-btn ax-success">success</a>
04<a href="###" class="ax-btn ax-error">error</a>
05<a href="###" class="ax-btn ax-warning">warning</a>
06<a href="###" class="ax-btn ax-info">info</a>
07<a href="###" class="ax-btn ax-question">question</a>
08<a href="###" class="ax-btn ax-ignore">ignore</a>
09<a href="###" class="ax-btn ax-text">black</a>
10<input type="submit" value="input" class="ax-btn ax-primary">
11<button type="button" class="ax-btn ax-primary">button</button>

禁止的实体的按钮

对ax-btn使用ax-disabled类表示禁止用户操作。

默认按钮主色按钮 success error warning info question ignore

black

01<a href="###" class="ax-btn ax-disabled">默认按钮</a>
02<a href="###" class="ax-btn ax-primary  ax-disabled">主色按钮</a>
03<a href="###" class="ax-btn ax-success  ax-disabled">success</a>
04<a href="###" class="ax-btn ax-error  ax-disabled">error</a>
05<a href="###" class="ax-btn ax-warning  ax-disabled">warning</a>
06<a href="###" class="ax-btn ax-info  ax-disabled">info</a>
07<a href="###" class="ax-btn ax-question  ax-disabled">question</a>
08<a href="###" class="ax-btn ax-ignore  ax-disabled">ignore</a>
09 
10<a href="###" class="ax-btn ax-text  ax-disabled">black</a>
11<input type="submit" value="input" class="ax-btn ax-primary  ax-disabled">
12<button type="button" class="ax-btn ax-primary  ax-disabled">button</button>

线体颜色的按钮

对ax-btn使用ax-line类定义线体按钮。

默认按钮主色按钮 success error warning info question ignore

black

01<a href="###" class="ax-btn ax-line">默认按钮</a>
02<a href="###" class="ax-btn ax-line ax-primary">主色按钮</a>
03<a href="###" class="ax-btn ax-line ax-success">success</a>
04<a href="###" class="ax-btn ax-line ax-error">error</a>
05<a href="###" class="ax-btn ax-line ax-warning">warning</a>
06<a href="###" class="ax-btn ax-line ax-info">info</a>
07<a href="###" class="ax-btn ax-line ax-question">question</a>
08<a href="###" class="ax-btn ax-line ax-ignore">ignore</a>
09<a href="###" class="ax-btn ax-line ax-text">black</a>
10<input type="submit" value="input" class="ax-btn ax-line ax-primary">
11<button type="button" class="ax-btn ax-line ax-primary">button</button>

禁止的线体的按钮

对ax-btn使用ax-disabled类表示禁止用户操作。

默认按钮主色按钮 success error warning info question ignore

black

01<a href="###" class="ax-btn ax-line ax-disabled">默认按钮</a>
02<a href="###" class="ax-btn ax-line ax-primary ax-disabled">主色按钮</a>
03<a href="###" class="ax-btn ax-line ax-success ax-disabled">success</a>
04<a href="###" class="ax-btn ax-line ax-error ax-disabled">error</a>
05<a href="###" class="ax-btn ax-line ax-warning ax-disabled">warning</a>
06<a href="###" class="ax-btn ax-line ax-info ax-disabled">info</a>
07<a href="###" class="ax-btn ax-line ax-question ax-disabled">question</a>
08<a href="###" class="ax-btn ax-line ax-ignore ax-disabled">ignore</a>
09<a href="###" class="ax-btn ax-line ax-text ax-disabled">black</a>
10<input type="submit" value="input" class="ax-btn ax-line ax-primary ax-disabled">
11<button type="button" class="ax-btn ax-line ax-primary ax-disabled">button</button>

深色背景的按钮

在深色背景下，使用ax-reverse类进行颜色反转。

常规按钮主色按钮 disabled disabled

success error warning info question ignore black

line常规按钮 line主色按钮 line-disabled

line-disabled line-success line-error line-warning line-info line-question line-ignore line-black

01<a href="###" class="ax-btn ax-reverse">常规按钮</a>
02<button class="ax-btn ax-reverse">button</button>
03<input type="submit" value="input" class="ax-btn ax-reverse">
04<button class="ax-btn ax-info ax-reverse">button</button>
05<input type="submit" value="input" class="ax-btn ax-ignore ax-reverse">
06<a href="###" class="ax-btn ax-primary ax-reverse">主色按钮</a>
07<a href="###" class="ax-btn ax-reverse ax-disabled">disabled</a>
08<a href="###" class="ax-btn ax-primary ax-reverse ax-disabled">disabled</a>
09<a href="###" class="ax-btn ax-success ax-reverse">success</a>
10<a href="###" class="ax-btn ax-error ax-reverse">error</a>
11<a href="###" class="ax-btn ax-warning ax-reverse">warning</a>
12<a href="###" class="ax-btn ax-info ax-reverse">info</a>
13<a href="###" class="ax-btn ax-question ax-reverse">question</a>
14<a href="###" class="ax-btn ax-ignore ax-reverse">ignore</a>
15<a href="###" class="ax-btn ax-text ax-reverse">black</a>
16<div class="ax-break"></div>
17<a href="###" class="ax-btn ax-line ax-line ax-reverse">line常规按钮</a>
18<button class="ax-btn ax-line  ax-reverse">line-button</button>
19<input type="submit" value="line-input" class="ax-btn ax-line ax-reverse">
20<button class="ax-btn ax-line ax-info ax-reverse">line-button</button>
21<input type="submit" value="line-input" class="ax-btn ax-line ax-ignore ax-reverse">
22<a href="###" class="ax-btn ax-line ax-primary ax-reverse">line主色按钮</a>
23<a href="###" class="ax-btn ax-line ax-reverse ax-disabled">line-disabled</a>
24<a href="###" class="ax-btn ax-line ax-primary ax-reverse ax-disabled">line-disabled</a>
25<a href="###" class="ax-btn ax-line ax-success ax-reverse">line-success</a>
26<a href="###" class="ax-btn ax-line ax-error ax-reverse">line-error</a>
27<a href="###" class="ax-btn ax-line ax-warning ax-reverse">line-warning</a>
28<a href="###" class="ax-btn ax-line ax-info ax-reverse">line-info</a>
29<a href="###" class="ax-btn ax-line ax-question ax-reverse">line-question</a>
30<a href="###" class="ax-btn ax-line ax-ignore ax-reverse">line-ignore</a>
31<a href="###" class="ax-btn ax-line ax-text ax-reverse">line-black</a>

渐变按钮

本框架一共定义了7种渐变按钮。请给有底色的按钮添加ax-gradient类，用户可根据需要变化渐变角度，使用方法见：渐变。基本结构如下：

primary error success warning info question

1<a href="###" class="ax-btn ax-primary ax-gradient">primary</a>
2<a href="###" class="ax-btn ax-error ax-gradient">error</a>
3<a href="###" class="ax-btn ax-success ax-gradient">success</a>
4<a href="###" class="ax-btn ax-warning ax-gradient">warning</a>
5<a href="###" class="ax-btn ax-info ax-gradient">info</a>
6<a href="###" class="ax-btn ax-question ax-gradient">question</a>

波纹按钮

对按钮追加axRipple属性可使用波纹点击效果。点击波纹不仅可用于按钮，而且可用于任意元素，详见这里。

默认 primary error success warning info question

1<a href="###" class="ax-btn" axRipple>默认</a>
2<a href="###" class="ax-btn ax-primary" axRipple>primary</a>
3<a href="###" class="ax-btn ax-error" axRipple>error</a>
4<a href="###" class="ax-btn ax-success" axRipple>success</a>
5<a href="###" class="ax-btn ax-warning" axRipple>warning</a>
6<a href="###" class="ax-btn ax-info" axRipple>info</a>
7<a href="###" class="ax-btn ax-question" axRipple>question</a>

阴影按钮

使用ax-shadow类可实现按钮阴影效果，当然本框架对使用阴影的按钮做了筛选，ax-line、ax-plain和ax-disabled类的按钮不适合使用阴影。

default primary error success

warning info question question

01<div class="ax-break-xxl"></div>
02<span class="ax-gutter-xxl"></span>
03<a href="###" class="ax-btn ax-shadow">default</a>
04<span class="ax-gutter-xxl"></span>
05<a href="###" class="ax-btn ax-primary ax-shadow">primary</a>
06<span class="ax-gutter-xxl"></span>
07<a href="###" class="ax-btn ax-error ax-shadow">error</a>
08<span class="ax-gutter-xxl"></span>
09<a href="###" class="ax-btn ax-success ax-shadow">success</a>
10<div class="ax-break-xxl"></div>
11<span class="ax-gutter-xxl"></span>
12<a href="###" class="ax-btn ax-warning ax-shadow">warning</a>
13<span class="ax-gutter-xxl"></span>
14<a href="###" class="ax-btn ax-info ax-shadow">info</a>
15<span class="ax-gutter-xxl"></span>
16<a href="###" class="ax-btn ax-question ax-shadow">question</a>
17<span class="ax-gutter-xxl"></span>
18<a href="###" class="ax-btn ax-text ax-shadow">question</a>
19<div class="ax-break-xxl"></div>

无边按钮

本框架按钮默认都使用了边框，当ax-btn追加ax-borderless类可实现无边按钮效果。当然本框架对使用无边的按钮做了筛选，有色彩填充的按钮才适用。

普通有边普通无边渐变无边

1<a href="###" class="ax-btn ax-primary">普通有边</a>
2<a href="###" class="ax-btn ax-primary ax-borderless">普通无边</a>
3<a href="###" class="ax-btn ax-primary ax-gradient ax-borderless">primary渐变无边</a>
4<input type="submit" value="提交submit" class="ax-btn ax-success ax-borderless">
5<button type="button" class="ax-btn ax-question ax-borderless">提交button</button>

加载按钮

本框架一共定义了3种加载图片：loading.gif，loading.svg和loading-white.svg。分别对应的样式是ax-btn-loading ax-gif，ax-btn-loading，ax-btn-loading ax-white。对ax-color-primary等实体按钮已经定义了白色加载图标。基本结构如下：

加载中... 加载中... 加载中... 加载中... 加载中... 加载中...

1<i class="ax-btn-loading"></i><i class="ax-btn-loading ax-white"></i>
2<a href="###" class="ax-btn"><i class="ax-btn-loading"></i>加载中...</a>
3<a href="###" class="ax-btn"><i class="ax-btn-loading ax-gif"></i>加载中...</a>
4<a href="###" class="ax-btn ax-primary"><i class="ax-btn-loading ax-white"></i>加载中...</a>

IE和Edge浏览器不支持SVG内置动画，如果想保持兼容请选用gif动画。

简单文字打点加载效果。详见loading

加载中

`1`	`<a` `href="###"` `class="ax-btn"><i` `class="ax-waiting">加载中</i></a>`

模拟两个点击按钮加载效果。

点击确认 点击确认

HTML JS

code
1 <a href="###" class="ax-btn" id="load">点击确认</a>
2 <a href="###" class="ax-btn" id="wating">点击确认</a>
code
01 let load = document.querySelector('#load');
02 load.onclick = function(){
03 let _this = this;
04 _this.innerHTML = '确认中...';
05 _this.insertAdjacentHTML('afterbegin', '');
06 setTimeout(function(){
07 _this.innerHTML = '已确认';
08 alert('已确认');
09 },3000)
10 }
11 let waiting = document.querySelector('#waiting');
12 wating.onclick = function(){
13 let _this = this,
14 child = _this.firstChild;
15 child.innerHTML = '确认中';
16 child.classList.add('ax-waiting');
17 setTimeout(function(){
18 child.innerHTML = '已确认';
19 child.classList.remove('ax-waiting');
20 alert('已确认');
21 },3000)
22 }

图标按钮

对ax-btn按钮使用ax-icon类，即可实现方形的图标按钮。跟普通按钮一样可以添加ax-disabled类表示禁止用户操作。

01<a href="###" class="ax-btn ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
02<a href="###" class="ax-btn ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
03<a href="###" class="ax-btn ax-icon ax-disabled"><span class="ax-iconfont ax-icon-star"></span></a>
04<a href="###" class="ax-btn ax-primary ax-icon  ax-disabled"><span class="ax-iconfont ax-icon-star"></span></a>
05<a href="###" class="ax-btn ax-success ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
06<a href="###" class="ax-btn ax-error ax-icon"><span class="ax-iconfont ax-icon-shield-f"></span></a>
07<a href="###" class="ax-btn ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
08<a href="###" class="ax-btn ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
09<button class="ax-btn ax-question ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
10<a href="###" class="ax-btn ax-line ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
11<a href="###" class="ax-btn ax-line ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
12<a href="###" class="ax-btn ax-line ax-icon ax-disabled"><span class="ax-iconfont ax-icon-star"></span></a>
13<a href="###" class="ax-btn ax-line ax-primary ax-icon ax-disabled"><span class="ax-iconfont ax-icon-star"></span></a>
14<a href="###" class="ax-btn ax-line ax-success ax-icon"><span class="ax-iconfont ax-icon-email-f"></span></a>
15<a href="###" class="ax-btn ax-line ax-error ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
16<a href="###" class="ax-btn ax-line ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
17<a href="###" class="ax-btn ax-line ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
18<button class="ax-btn ax-line ax-question ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
19 
20<a href="###" class="ax-btn ax-sm ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
21<a href="###" class="ax-btn ax-sm ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
22<a href="###" class="ax-btn ax-sm ax-success ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
23<a href="###" class="ax-btn ax-sm ax-error ax-icon"><span class="ax-iconfont ax-icon-shield-f"></span></a>
24<a href="###" class="ax-btn ax-sm ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
25<a href="###" class="ax-btn ax-sm ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
26<button class="ax-btn ax-sm ax-question ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
27<a href="###" class="ax-btn ax-line ax-sm ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
28<a href="###" class="ax-btn ax-line ax-sm ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
29<a href="###" class="ax-btn ax-line ax-sm ax-success ax-icon"><span class="ax-iconfont ax-icon-email-f"></span></a>
30<a href="###" class="ax-btn ax-line ax-sm ax-error ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
31<a href="###" class="ax-btn ax-line ax-sm ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
32<a href="###" class="ax-btn ax-line ax-sm ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
33<button class="ax-btn ax-line ax-sm ax-question ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
34 
35<a href="###" class="ax-btn ax-lg ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
36<a href="###" class="ax-btn ax-lg ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
37<a href="###" class="ax-btn ax-lg ax-success ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
38<a href="###" class="ax-btn ax-lg ax-error ax-icon"><span class="ax-iconfont ax-icon-shield-f"></span></a>
39<a href="###" class="ax-btn ax-lg ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
40<a href="###" class="ax-btn ax-lg ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
41<button class="ax-btn ax-lg ax-question ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
42<a href="###" class="ax-btn ax-line ax-lg ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
43<a href="###" class="ax-btn ax-line ax-lg ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
44<a href="###" class="ax-btn ax-line ax-lg ax-success ax-icon"><span class="ax-iconfont ax-icon-email-f"></span></a>
45<a href="###" class="ax-btn ax-line ax-lg ax-error ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
46<a href="###" class="ax-btn ax-line ax-lg ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
47<a href="###" class="ax-btn ax-line ax-lg ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
48<button class="ax-btn ax-line ax-lg ax-question ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>

圆形按钮

对ax-btn，ax-line按钮使用ax-round类，即可实现大圆角的图标按钮；如果是一个图标按钮可使用ax-circle类，即表示正圆的按钮。

默认按钮默认按钮默认按钮默认按钮默认按钮默认按钮

1<a href="###" class="ax-btn ax-primary ax-sm ax-round">默认按钮</a>
2<a href="###" class="ax-btn ax-primary ax-round">默认按钮</a>
3<a href="###" class="ax-btn ax-primary ax-lg ax-round">默认按钮</a>
4<a href="###" class="ax-btn ax-line ax-primary ax-sm ax-round">默认按钮</a>
5<a href="###" class="ax-btn ax-line ax-primary ax-round">默认按钮</a>
6<a href="###" class="ax-btn ax-line ax-primary ax-lg ax-round">默认按钮</a>
7<a href="###" class="ax-btn ax-sm ax-icon ax-circled"><span class="ax-iconfont ax-icon-star"></span></a>
8<a href="###" class="ax-btn ax-icon ax-circle"><span class="ax-iconfont ax-icon-star"></span></a>
9<a href="###" class="ax-btn ax-lg ax-icon ax-circle"><span class="ax-iconfont ax-icon-star"></span></a>

文字无边按钮

使用ax-btn ax-plain类，即可实现文字按钮。可与其他风格按钮并排使用。跟普通按钮一样可以添加ax-disabled类表示禁止用户操作。input和button标签不适合使用ax-btn ax-plain类。

默认按钮主色按钮 success error warning info question ignore

black 禁止主色禁止默认按钮主色按钮默认按钮主色按钮

01<a href="###" class="ax-btn ax-plain ">默认按钮</a>
02<a href="###" class="ax-btn ax-plain ax-primary">主色按钮</a>
03<a href="###" class="ax-btn ax-plain ax-success">success</a>
04<a href="###" class="ax-btn ax-plain ax-error">error</a>
05<a href="###" class="ax-btn ax-plain ax-warning">warning</a>
06<a href="###" class="ax-btn ax-plain ax-info">info</a>
07<a href="###" class="ax-btn ax-plain ax-question">question</a>
08<a href="###" class="ax-btn ax-plain ax-ignore">ignore</a>
09<div class="ax-break-md"></div>
10<a href="###" class="ax-btn ax-plain ax-text">black</a>
11<a href="###" class="ax-btn ax-plain ax-disabled">禁止</a>
12<a href="###" class="ax-btn ax-plain ax-primary ax-disabled">主色禁止</a>
13<a href="###" class="ax-btn">默认按钮</a>
14<a href="###" class="ax-btn ax-primary">主色按钮</a>
15<a href="###" class="ax-btn ax-line">默认按钮</a>
16<a href="###" class="ax-btn ax-line ax-primary">主色按钮</a>

参数汇总

分类	类名	说明
性质	ax-btn	表示该元素是按钮，基础类名
类型	ax-line	表示线条型按钮
	ax-plain	表示文字型按钮
	ax-icon	表示图标按钮
颜色	ax-primary	表示主色按钮（蓝色）
	ax-success	表示成功按钮（绿色）
	ax-error	表示危险按钮（红色）
	ax-warning	表示警告按钮（黄色）
	ax-info	表示信息提示按钮（红色）
	ax-question	表示疑问按钮（橙色）
	ax-ignore	表示忽视按钮（浅色）
	ax-text	表示黑色按钮
宽度	ax-long	表示一级固定长度按钮
	ax-longer	表示二级固定长度按钮
	ax-longest	表示三级固定按钮
	ax-full	表示全宽的按钮
形状	ax-square	表示矩形按钮，没有圆角
	ax-radius	表示3px圆角按钮，默认
	ax-round	表示100%大圆角按钮
	ax-circle	表示圆形按钮
尺寸	ax-sm	表示高28px小按钮
	ax-md	表示38px中等按钮，默认
	ax-lg	表示48px大按钮
其他	ax-disabled	表示禁止按钮

组合按钮

如果需要将两个及两个以上按钮打包组合，可将多个按钮用ax-btn-group类包裹。注意一：如果组合按钮中只有一个按钮建议使用单个按钮而不使用组合按钮；注意二：由于框架将a和span元素定义为inline-block，所以需要将组合中的按钮紧密排列，否则空格或者换行会产生4px的间隙；注意三：如果按钮使用了svg图标请引入svgSprites.js图标文件

对组合按钮可以使用ax-active类，可作为tab导航使用。

01<span class="ax-btn-group"><a href="###" class="ax-btn ax-sm">读书</a><a href="###" class="ax-btn ax-sm">看报</a><a href="###" class="ax-btn ax-sm">玩手机</a><a href="###" class="ax-btn ax-sm">旅行</a></span>
02 
03<div class="ax-break-md"></div>
04 
05<span class="ax-btn-group"><a href="###" class="ax-btn">读书</a><a href="###" class="ax-btn">看报</a></span>
06 
07<span class="ax-btn-group"><a href="###" class="ax-btn">读书</a><a href="###" class="ax-btn ax-active">看报</a><a href="###" class="ax-btn">玩手机</a><a href="###" class="ax-btn">旅行</a></span>
08 
09<div class="ax-break-md"></div>
10 
11<span class="ax-btn-group"><a href="###" class="ax-btn ax-primary">读书</a><a href="###" class="ax-btn ax-primary">看报</a><a href="###" class="ax-btn ax-primary">玩手机</a><a href="###" class="ax-btn ax-primary">旅行</a></span>
12 
13<div class="ax-break-md"></div>
14 
15<span class="ax-btn-group"><a href="###" class="ax-btn ax-lg">读书</a><a href="###" class="ax-btn ax-lg">看报</a><a href="###" class="ax-btn ax-lg">玩手机</a><a href="###" class="ax-btn ax-lg">旅行</a></span>
16 
17<div class="ax-break-md"></div>
18 
19<span class="ax-btn-group"><a href="###" class="ax-btn ax-icon  ax-active"><span class="ax-iconfont ax-icon-star"></span></a><a href="###" class="ax-btn ax-icon"><span class="ax-iconfont ax-icon-email-f"></span></a><a href="###" class="ax-btn ax-icon"><span class="ax-iconfont ax-icon-shield-f"></span></a></span>
20 
21<div class="ax-break-md"></div>
22 
23<span class="ax-btn-group"><a href="###" class="ax-btn ax-primary">读书</a><a href="###" class="ax-btn ax-error">旅行</a><a href="###" class="ax-btn ax-question ax-icon"><span class="ax-iconfont ax-icon-star"></span></a></span>