Button 按钮
a标签和span标签的按钮
按钮一般用a标签或span标签标示。
a按钮
span按钮
<a href="###" class="ax-btn">a按钮</a>
<span class="ax-btn">span按钮</span>
input标签和button标签的按钮
在表单中通用input或button来作为提交或者重置按钮。input标签和button标签的按钮稍微特别一些，这两个标签在不同浏览器有不同的显示结果，我们已经做了hack处理。
<input type="submit" value="提交submit" class="ax-btn">
<button type="button" class="ax-btn">提交button</button>
文字按钮
文字按钮存在三种情况，第一种是简单的a标签按钮，第二种是非a标签按钮，第三种是嵌套在其他元素内的a标签按钮。
primary首要
ignore忽略
cancel无效或者取消
secondary次要
danger危险
success成功
warning警告
info信息
ad广告
图标文字按钮
primary首要
ignore忽略
cancel无效或者取消
secondary次要
danger危险
success成功
warning警告
info信息
ad广告
图标文字按钮
primary首要
ignore忽略
cancel无效或者取消
secondary次要
danger危险
success成功
warning警告
info信息
ad广告
图标文字按钮
<a href="###" class="ax-color-primary">primary首要</a>
<a href="###" class="ax-color-ignore">ignore忽略</a>
<a href="###" class="ax-cancel">cancel无效或者取消a</a>
<a href="###" class="ax-color-secondary">secondary次要</a>
<a href="###" class="ax-color-danger">danger危险</a>
<a href="###" class="ax-color-success">success成功</a>
<a href="###" class="ax-color-warning">warning警告</a>
<a href="###" class="ax-color-info">info信息</a>
<a href="###" class="ax-color-ad">ad广告</a>
<span class="ax-color-primary">primary首要</span>
<span class="ax-color-ignore">ignore忽略</span>
<span class="ax-cancel">cancel无效或者取消</span>
<span class="ax-color-secondary">secondary次要</span>
<span class="ax-color-danger">danger危险</span>
<span class="ax-color-success">success成功</span>
<span class="ax-color-warning">warning警告</span>
<span class="ax-color-info">info信息</span>
<span class="ax-color-ad">ad广告</span>
<span class="ax-color-primary"><a href="###">primary首要</a></span>
<span class="ax-color-ignore"><a href="###">ignore忽略</a></span>
<span class="ax-cancel"><a href="###">cancel无效或者取消</a></span>
<span class="ax-color-secondary"><a href="###">secondary次要</a></span>
<span class="ax-color-danger"><a href="###">danger危险</a></span>
<span class="ax-color-success"><a href="###">success成功</a></span>
<span class="ax-color-warning"><a href="###">warning警告</a></span>
<span class="ax-color-info"><a href="###">info信息</a></span>
<span class="ax-color-ad"><a href="###">ad广告</a></span>
带图标的按钮
在按钮中使用图标需要写入图标代码，如下。注意：input的按钮不能使用图标。
a按钮
span按钮
<a href="###" class="ax-btn"><span class="ax-iconfont ax-icon-star"></span>a按钮</a>
<span class="ax-btn"><span class="ax-iconfont ax-icon-star"></span>span按钮</span>
<button type="button" class="ax-btn"><span class="ax-iconfont ax-icon-star"></span>提交button</button>
如果图标在按钮右侧，可在图标标签上加上ax-at-right类。
a按钮
span按钮
<a href="###" class="ax-btn">a按钮<span class="ax-iconfont ax-icon-star ax-at-right"></span></a>
<span class="ax-btn">span按钮<span class="ax-iconfont ax-icon-star ax-at-right"></span></span>
<button type="button" class="ax-btn">提交button<span class="ax-iconfont ax-icon-star ax-at-right"></span></button>
全宽的按钮
对ax-btn使用ax-full类定义全宽按钮，占100%。
a按钮全宽
span按钮全宽
<a href="###" class="ax-btn ax-full">a按钮全宽</a>
<span class="ax-btn ax-full">span按钮全宽</span>
<input type="submit" value="提交submit全宽" class="ax-btn ax-full">
<button type="button" class="ax-btn ax-full">提交button全宽</button>
全宽的带边距的按钮
ax-margin-left表示左边距，ax-margin-right表示右边距，ax-margin-lr表示左右边距。
a按钮全宽带左边距
span按钮全宽带右边距
<a href="###" class="ax-btn ax-full ax-margin-left">a按钮全宽带左边距</a>
<span class="ax-btn ax-full ax-margin-right">span按钮全宽带右边距</span>
<input type="submit" value="提交submit全宽带边距" class="ax-btn ax-full ax-margin-lr">
<button type="button" class="ax-btn ax-full ax-margin-lr">提交button全宽带边距</button>
方形的按钮
本框架按钮默认是带3px的圆角，如果不需要圆角可加上ax-square类。
a按钮
span按钮
<a href="###" class="ax-btn ax-square">a按钮</a>
<span class="ax-btn ax-square">span按钮</span>
<input type="submit" value="提交submit" class="ax-btn ax-square">
<button type="button" class="ax-btn ax-square">提交button</button>
固定宽度的按钮
本框架给按钮定义了3种固定宽度：120px，样式ax-long；200px，样式是ax-longer；240px，样式是ax-longest。
<a href="###" class="ax-btn ax-long">120px-a</a>
<span class="ax-btn ax-long">120px-span<</span>
<input type="submit" value="120px-input" class="ax-btn ax-long">
<button type="button" class="ax-btn ax-long">120px-button</button>
<a href="###" class="ax-btn ax-longer">200px-a</a>
<span class="ax-btn ax-longer">200px-span</span>
<input type="submit" value="200px-input" class="ax-btn ax-longer">
<button type="button" class="ax-btn ax-longer">200px-button</button>
<a href="###" class="ax-btn ax-longest">240px-a</a>
<span class="ax-btn ax-longest">240px-span</span>
<input type="submit" value="240px-input" class="ax-btn ax-longest">
<button type="button" class="ax-btn ax-longest">240px-button</button>
为了照顾视觉体验，小按钮的的固定宽度偏小。分别是80px、120px和180px。ax-xxs和ax-xs尺寸的按钮不适合使用固定宽度！
<a href="###" class="ax-btn ax-sm ax-long">80px-a</a>
<span class="ax-btn ax-sm ax-long">80px-span</span>
<input type="submit" value="80px-input" class="ax-btn ax-sm ax-long">
<button type="button" class="ax-btn ax-sm ax-long">80px-button</button>
<div class="ax-break-md"></div>
<a href="###" class="ax-btn ax-sm ax-longer">120px-a</a>
<span class="ax-btn ax-sm ax-longer">120px-span</span>
<input type="submit" value="120px-input" class="ax-btn ax-sm ax-longer">
<button type="button" class="ax-btn ax-sm ax-longer">120px-button</button>
<div class="ax-break-md"></div>
<a href="###" class="ax-btn ax-sm ax-longest">180px-a</a>
<span class="ax-btn ax-sm ax-longest">180px-span</span>
<input type="submit" value="180px-input" class="ax-btn ax-sm ax-longest">
<div class="ax-break-md"></div>
<button type="button" class="ax-btn ax-sm ax-longest">180px-button</button>
为了照顾视觉体验，大按钮的的固定宽度偏大。分别是160px、240px和280px。
<a href="###" class="ax-btn ax-lg ax-long">160px-a</a>
<span class="ax-btn ax-lg ax-long">160px-span</span>
<input type="submit" value="160px-input" class="ax-btn ax-lg ax-long">
<button type="button" class="ax-btn ax-lg ax-long">160px-button</button>
<div class="ax-break-md"></div>
<a href="###" class="ax-btn ax-lg ax-longer">240px-a</a>
<span class="ax-btn ax-lg ax-longer">240px-span</span>
<input type="submit" value="240px-input" class="ax-btn ax-lg ax-longer">
<button type="button" class="ax-btn ax-lg ax-longer">240px-button</button>
<div class="ax-break-md"></div>
<a href="###" class="ax-btn ax-lg ax-longest">280px-a</a>
<span class="ax-btn ax-lg ax-longest">280px-span</span>
<input type="submit" value="280px-input" class="ax-btn ax-lg ax-longest">
<div class="ax-break-md"></div>
<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。
<a href="###" class="ax-btn ax-xxs">极小按钮</a>
<a href="###" class="ax-btn ax-xxs"><span class="ax-iconfont ax-icon-star"></span>极小按钮</a>
<span class="ax-btn ax-xxs">极小按钮</span>
<input type="submit" value="特小按钮" class="ax-btn ax-xxs">
<button type="button" class="ax-btn ax-xxs">极小按钮</button>
<div class="ax-break-md"></div>
<a href="###" class="ax-btn ax-xs">特小按钮</a>
<a href="###" class="ax-btn ax-xs"><span class="ax-iconfont ax-icon-star"></span>特小按钮</a>
<span class="ax-btn ax-xs">特小按钮</span>
<input type="submit" value="特小按钮" class="ax-btn ax-xs">
<button type="button" class="ax-btn ax-xs">特小按钮</button>
<div class="ax-break-md"></div>
<a href="###" class="ax-btn ax-sm">小按钮</a>
<a href="###" class="ax-btn ax-sm"><span class="ax-iconfont ax-icon-star"></span>小按钮</a>
<span class="ax-btn ax-sm">小按钮</span>
<input type="submit" value="小按钮" class="ax-btn ax-sm">
<button type="button" class="ax-btn ax-sm">小按钮</button>
<div class="ax-break-md"></div>
<a href="###" class="ax-btn">常规按钮</a>
<a href="###" class="ax-btn"><span class="ax-iconfont ax-icon-star"></span>常规按钮</a>
<span class="ax-btn">常规按钮</span>
<input type="submit" value="常规按钮" class="ax-btn">
<button type="button" class="ax-btn">常规按钮</button>
<div class="ax-break-md"></div>
<a href="###" class="ax-btn ax-lg">大按钮</a>
<a href="###" class="ax-btn ax-lg"><span class="ax-iconfont ax-icon-star"></span>大按钮</a>
<span class="ax-btn ax-lg">大按钮</span>
<input type="submit" value="大按钮" class="ax-btn ax-lg">
<button type="button" class="ax-btn ax-lg">大按钮</button>
实体颜色的按钮
使用ax-btn类定义实体按钮，以ax-*方式定义不同颜色的按钮，本框架共定义了9种颜色按钮，分别是：ax-primary，secondary，success，danger，warning，info，ad，black和ignore。
<a href="###" class="ax-btn ">默认按钮</a>
<a href="###" class="ax-btn ax-primary">主色按钮</a>
<a href="###" class="ax-btn ax-secondary">secondary</a>
<a href="###" class="ax-btn ax-success">success</a>
<a href="###" class="ax-btn ax-danger">danger</a>
<a href="###" class="ax-btn ax-warning">warning</a>
<a href="###" class="ax-btn ax-info">info</a>
<a href="###" class="ax-btn ax-ad">ad</a>
<a href="###" class="ax-btn ax-ignore">ignore</a>
<a href="###" class="ax-btn ax-black">black</a>
<input type="submit" value="input" class="ax-btn ax-primary">
<button type="button" class="ax-btn ax-primary">button</button>
禁止的实体的按钮
对ax-btn使用ax-disabled类表示禁止用户操作。
<a href="###" class="ax-btn ax-disabled">默认按钮</a>
<a href="###" class="ax-btn ax-primary ax-disabled">主色按钮</a>
<a href="###" class="ax-btn ax-secondary ax-disabled">secondary</a>
<a href="###" class="ax-btn ax-success ax-disabled">success</a>
<a href="###" class="ax-btn ax-danger ax-disabled">danger</a>
<a href="###" class="ax-btn ax-warning ax-disabled">warning</a>
<a href="###" class="ax-btn ax-info ax-disabled">info</a>
<a href="###" class="ax-btn ax-ad ax-disabled">ad</a>
<a href="###" class="ax-btn ax-ignore ax-disabled">ignore</a>
<a href="###" class="ax-btn ax-black ax-disabled">black</a>
<input type="submit" value="input" class="ax-btn ax-primary ax-disabled">
<button type="button" class="ax-btn ax-primary ax-disabled">button</button>
线体颜色的按钮
对ax-btn使用ax-line类定义线体按钮。
<a href="###" class="ax-btn ax-line">默认按钮</a>
<a href="###" class="ax-btn ax-line ax-primary">主色按钮</a>
<a href="###" class="ax-btn ax-line ax-secondary">secondary</a>
<a href="###" class="ax-btn ax-line ax-success">success</a>
<a href="###" class="ax-btn ax-line ax-danger">danger</a>
<a href="###" class="ax-btn ax-line ax-warning">warning</a>
<a href="###" class="ax-btn ax-line ax-info">info</a>
<a href="###" class="ax-btn ax-line ax-ad">ad</a>
<a href="###" class="ax-btn ax-line ax-ignore">ignore</a>
<a href="###" class="ax-btn ax-line ax-black">black</a>
<input type="submit" value="input" class="ax-btn ax-line ax-primary">
<button type="button" class="ax-btn ax-line ax-primary">button</button>
禁止的线体的按钮
对ax-btn使用ax-disabled类表示禁止用户操作。
<a href="###" class="ax-btn ax-line ax-disabled">默认按钮</a>
<a href="###" class="ax-btn ax-line ax-primary ax-disabled">主色按钮</a>
<a href="###" class="ax-btn ax-line ax-secondary ax-disabled">secondary</a>
<a href="###" class="ax-btn ax-line ax-success ax-disabled">success</a>
<a href="###" class="ax-btn ax-line ax-danger ax-disabled">danger</a>
<a href="###" class="ax-btn ax-line ax-warning ax-disabled">warning</a>
<a href="###" class="ax-btn ax-line ax-info ax-disabled">info</a>
<a href="###" class="ax-btn ax-line ax-ad ax-disabled">ad</a>
<a href="###" class="ax-btn ax-line ax-ignore ax-disabled">ignore</a>
<a href="###" class="ax-btn ax-line ax-black ax-disabled">black</a>
<input type="submit" value="input" class="ax-btn ax-line ax-primary ax-disabled">
<button type="button" class="ax-btn ax-line ax-primary ax-disabled">button</button>
深色背景的按钮
在深色背景下，使用ax-reverse类进行颜色反转。
<a href="###" class="ax-btn ax-reverse">常规按钮</a>
<button class="ax-btn ax-reverse">button</button>
<input type="submit" value="input" class="ax-btn ax-reverse">
<button class="ax-btn ax-info ax-reverse">button</button>
<input type="submit" value="input" class="ax-btn ax-ignore ax-reverse">
<a href="###" class="ax-btn ax-primary ax-reverse">主色按钮</a>
<a href="###" class="ax-btn ax-reverse ax-disabled">disabled</a>
<a href="###" class="ax-btn ax-primary ax-reverse ax-disabled">disabled</a>
<a href="###" class="ax-btn ax-secondary ax-reverse">secondary</a>
<a href="###" class="ax-btn ax-success ax-reverse">success</a>
<a href="###" class="ax-btn ax-danger ax-reverse">danger</a>
<a href="###" class="ax-btn ax-warning ax-reverse">warning</a>
<a href="###" class="ax-btn ax-info ax-reverse">info</a>
<a href="###" class="ax-btn ax-ad ax-reverse">ad</a>
<a href="###" class="ax-btn ax-ignore ax-reverse">ignore</a>
<a href="###" class="ax-btn ax-black ax-reverse">black</a>
<div class="ax-break"></div>
<a href="###" class="ax-btn ax-line ax-line ax-reverse">line常规按钮</a>
<button class="ax-btn ax-line ax-reverse">line-button</button>
<input type="submit" value="line-input" class="ax-btn ax-line ax-reverse">
<button class="ax-btn ax-line ax-info ax-reverse">line-button</button>
<input type="submit" value="line-input" class="ax-btn ax-line ax-ignore ax-reverse">
<a href="###" class="ax-btn ax-line ax-primary ax-reverse">line主色按钮</a>
<a href="###" class="ax-btn ax-line ax-reverse ax-disabled">line-disabled</a>
<a href="###" class="ax-btn ax-line ax-primary ax-reverse ax-disabled">line-disabled</a>
<a href="###" class="ax-btn ax-line ax-secondary ax-reverse">line-secondary</a>
<a href="###" class="ax-btn ax-line ax-success ax-reverse">line-success</a>
<a href="###" class="ax-btn ax-line ax-danger ax-reverse">line-danger</a>
<a href="###" class="ax-btn ax-line ax-warning ax-reverse">line-warning</a>
<a href="###" class="ax-btn ax-line ax-info ax-reverse">line-info</a>
<a href="###" class="ax-btn ax-line ax-ad ax-reverse">line-ad</a>
<a href="###" class="ax-btn ax-line ax-ignore ax-reverse">line-ignore</a>
<a href="###" class="ax-btn ax-line ax-black ax-reverse">line-black</a>
渐变按钮
本框架一共定义了7种渐变按钮。请给有底色的按钮添加ax-gradient类，用户可根据需要变化渐变角度，使用方法见：渐变。基本结构如下：
<a href="###" class="ax-btn ax-primary ax-gradient">primary</a>
<a href="###" class="ax-btn ax-secondary ax-gradient">secondary</a>
<a href="###" class="ax-btn ax-danger ax-gradient">danger</a>
<a href="###" class="ax-btn ax-success ax-gradient">success</a>
<a href="###" class="ax-btn ax-warning ax-gradient">warning</a>
<a href="###" class="ax-btn ax-info ax-gradient">info</a>
<a href="###" class="ax-btn ax-ad ax-gradient">ad</a>
波纹按钮 JS
对按钮追加ax-ripple可使用波纹点击效果。点击播放不仅可用于按钮，而且可用于任意元素，详见这里。
<a href="###" class="ax-btn ax-ripple">默认</a>
<a href="###" class="ax-btn ax-primary ax-ripple">primary</a>
<a href="###" class="ax-btn ax-secondary ax-ripple">secondary</a>
<a href="###" class="ax-btn ax-danger ax-ripple">danger</a>
<a href="###" class="ax-btn ax-success ax-ripple">success</a>
<a href="###" class="ax-btn ax-warning ax-ripple">warning</a>
<a href="###" class="ax-btn ax-info ax-ripple">info</a>
<a href="###" class="ax-btn ax-ad ax-ripple">ad</a>
阴影按钮
使用ax-shadow类可实现按钮阴影效果，当然本框架对使用阴影的按钮做了筛选，ax-line、ax-text和ax-disabled类的按钮不适合使用阴影。
<div class="ax-break-xxl"></div>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-shadow">default</a>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-primary ax-shadow">primary</a>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-secondary ax-shadow">secondary</a>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-danger ax-shadow">danger</a>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-success ax-shadow">success</a>
<div class="ax-break-xxl"></div>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-warning ax-shadow">warning</a>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-info ax-shadow">info</a>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-ad ax-shadow">ad</a>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-black ax-shadow">ad</a>
<div class="ax-break-xxl"></div>
无边按钮
本框架按钮默认都使用了边框，当ax-btn追加ax-borderless类可实现无边按钮效果。当然本框架对使用无边的按钮做了筛选，有色彩填充的按钮才适用。
<a href="###" class="ax-btn ax-primary">普通有边</a>
<a href="###" class="ax-btn ax-primary ax-borderless">普通无边</a>
<a href="###" class="ax-btn ax-primary ax-gradient ax-borderless">primary渐变无边</a>
<input type="submit" value="提交submit" class="ax-btn ax-success ax-borderless">
<button type="button" class="ax-btn ax-ad 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等实体按钮已经定义了白色加载图标。基本结构如下：
<i class="ax-btn-loading"></i><i class="ax-btn-loading ax-white"></i>
<a href="###" class="ax-btn"><i class="ax-btn-loading"></i>加载中...</a>
<a href="###" class="ax-btn"><i class="ax-btn-loading ax-gif"></i>加载中...</a>
<a href="###" class="ax-btn ax-primary"><i class="ax-btn-loading ax-white"></i>加载中...</a>
IE和Edge浏览器不支持SVG内置动画，如果想保持兼容请选用gif动画。
图标按钮
对ax-btn按钮使用ax-icon类，即可实现方形的图标按钮。跟普通按钮一样可以添加ax-disabled类表示禁止用户操作。
<a href="###" class="ax-btn ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-icon ax-disabled"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-primary ax-icon ax-disabled"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-success ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-danger ax-icon"><span class="ax-iconfont ax-icon-shield-fill"></span></a>
<a href="###" class="ax-btn ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<button class="ax-btn ax-ad ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
<a href="###" class="ax-btn ax-line ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-icon ax-disabled"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-primary ax-icon ax-disabled"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-success ax-icon"><span class="ax-iconfont ax-icon-email-fill"></span></a>
<a href="###" class="ax-btn ax-line ax-danger ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<button class="ax-btn ax-line ax-ad ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
<a href="###" class="ax-btn ax-sm ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-sm ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-sm ax-success ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-sm ax-danger ax-icon"><span class="ax-iconfont ax-icon-shield-fill"></span></a>
<a href="###" class="ax-btn ax-sm ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-sm ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<button class="ax-btn ax-sm ax-ad ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
<a href="###" class="ax-btn ax-line ax-sm ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-sm ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-sm ax-success ax-icon"><span class="ax-iconfont ax-icon-email-fill"></span></a>
<a href="###" class="ax-btn ax-line ax-sm ax-danger ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-sm ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-sm ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<button class="ax-btn ax-line ax-sm ax-ad ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
<a href="###" class="ax-btn ax-lg ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-lg ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-lg ax-success ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-lg ax-danger ax-icon"><span class="ax-iconfont ax-icon-shield-fill"></span></a>
<a href="###" class="ax-btn ax-lg ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-lg ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<button class="ax-btn ax-lg ax-ad ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
<a href="###" class="ax-btn ax-line ax-lg ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-lg ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-lg ax-success ax-icon"><span class="ax-iconfont ax-icon-email-fill"></span></a>
<a href="###" class="ax-btn ax-line ax-lg ax-danger ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-lg ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-lg ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<button class="ax-btn ax-line ax-lg ax-ad ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
圆形按钮
对ax-btn，ax-line按钮使用ax-round类，即可实现大圆角的图标按钮；如果是一个图标按钮可使用ax-circle类，即表示正圆的按钮。
<a href="###" class="ax-btn ax-primary ax-sm ax-round">默认按钮</a>
<a href="###" class="ax-btn ax-primary ax-round">默认按钮</a>
<a href="###" class="ax-btn ax-primary ax-lg ax-round">默认按钮</a>
<a href="###" class="ax-btn ax-line ax-primary ax-sm ax-round">默认按钮</a>
<a href="###" class="ax-btn ax-line ax-primary ax-round">默认按钮</a>
<a href="###" class="ax-btn ax-line ax-primary ax-lg ax-round">默认按钮</a>
<a href="###" class="ax-btn ax-sm ax-icon ax-circled"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-icon ax-circle"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-lg ax-icon ax-circle"><span class="ax-iconfont ax-icon-star"></span></a>
文字无边按钮
使用ax-btn ax-text类，即可实现文字按钮。可与其他风格按钮并排使用。跟普通按钮一样可以添加ax-disabled类表示禁止用户操作。input和button标签不适合使用ax-btn ax-text类。
<a href="###" class="ax-btn ax-text ">默认按钮</a>
<a href="###" class="ax-btn ax-text ax-primary">主色按钮</a>
<a href="###" class="ax-btn ax-text ax-secondary">secondary</a>
<a href="###" class="ax-btn ax-text ax-success">success</a>
<a href="###" class="ax-btn ax-text ax-danger">danger</a>
<a href="###" class="ax-btn ax-text ax-warning">warning</a>
<a href="###" class="ax-btn ax-text ax-info">info</a>
<a href="###" class="ax-btn ax-text ax-ad">ad</a>
<a href="###" class="ax-btn ax-text ax-ignore">ignore</a>
<div class="ax-break-md"></div>
<a href="###" class="ax-btn ax-text ax-black">black</a>
<a href="###" class="ax-btn ax-text ax-disabled">禁止</a>
<a href="###" class="ax-btn ax-text ax-primary ax-disabled">主色禁止</a>
<a href="###" class="ax-btn">默认按钮</a>
<a href="###" class="ax-btn ax-primary">主色按钮</a>
<a href="###" class="ax-btn ax-line">默认按钮</a>
<a href="###" class="ax-btn ax-line ax-primary">主色按钮</a>
参数汇总
| 分类 | 类名 | 说明 |
|---|---|---|
| 性质 | ax-btn | 表示该元素是按钮，基础类名 |
| 类型 | ax-line | 表示线条型按钮 |
| ax-text | 表示文字型按钮 | |
| ax-icon | 表示图标按钮 | |
| 颜色 | ax-primary | 表示主色按钮（蓝色） |
| ax-secondary | 表示辅助按钮（深色） | |
| ax-success | 表示成功按钮（绿色） | |
| ax-danger | 表示危险按钮（红色） | |
| ax-warning | 表示警告按钮（黄色） | |
| ax-info | 表示信息提示按钮（红色） | |
| ax-ad | 表示广告按钮（橙色） | |
| ax-ignore | 表示忽视按钮（浅色） | |
| ax-black | 表示黑色按钮 | |
| 宽度 | 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-reverse | 表示颜色反转，用于深色背景 |
组合按钮
如果需要将两个及两个以上按钮打包组合，可将多个按钮用ax-btn-group类包裹。注意一：如果组合按钮中只有一个按钮建议使用单个按钮而不使用组合按钮；注意二：由于框架将a和span元素定义为inline-block，所以需要将组合中的按钮紧密排列，否则空格或者换行会产生4px的间隙；注意三：如果按钮使用了svg图标请引入svgSprites.js图标文件
对组合按钮可以使用ax-active类，可作为tab导航使用。
<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>
<div class="ax-break-md"></div>
<span class="ax-btn-group"><a href="###" class="ax-btn">读书</a><a href="###" class="ax-btn">看报</a></span>
<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>
<div class="ax-break-md"></div>
<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>
<div class="ax-break-md"></div>
<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>
<div class="ax-break-md"></div>
<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-fill"></span></a><a href="###" class="ax-btn ax-icon"><span class="ax-iconfont ax-icon-shield-fill"></span></a></span>
<div class="ax-break-md"></div>
<span class="ax-btn-group"><a href="###" class="ax-btn ax-icon ax-active"><svg class="ax-svg"><use xlink:href="#ax-icon-backspace-fill"></use></svg></a><a href="###" class="ax-btn ax-icon"><svg class="ax-svg"><use xlink:href="#ax-icon-close"></use></svg></a><a href="###" class="ax-btn ax-icon"><svg class="ax-svg"><use xlink:href="#ax-icon-link"></use></svg></a></span>
<div class="ax-break-md"></div>
<span class="ax-btn-group"><a href="###" class="ax-btn ax-primary">读书</a><a href="###" class="ax-btn ax-danger">旅行</a><a href="###" class="ax-btn ax-ad ax-icon"><span class="ax-iconfont ax-icon-star"></span></a></span>