Button 按钮

a标签和span标签的按钮

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

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

input标签和button标签的按钮

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

                            <input type="submit" value="提交submit" class="ax-btn">
                            <button type="button" class="ax-btn">提交button</button>
                        

文字按钮

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

                                <a href="###" class="ax-color-primary">primary首要</a>
                                <a href="###" class="ax-color-ignore">ignore忽略</a>
                                <a href="###" class="ax-text-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-text-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-text-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

120px-a 120px-span
200px-a 200px-span
240px-a 240px-span
                                <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>
                        

为了照顾视觉体验,小按钮的的固定宽度偏小。分别是80px120px180px。ax-xxs和ax-xs尺寸的按钮不适合使用固定宽度!

80px-a 80px-span
120px-a 120px-span
180px-a 180px-span
                                <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>
                        

为了照顾视觉体验,大按钮的的固定宽度偏大。分别是160px240px280px

160px-a 160px-span
240px-a 240px-span
280px-a 280px-span
                                <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.gifloading.svgloading-white.svg。分别对应的样式是ax-btn-loading ax-gifax-btn-loadingax-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动画。

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

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

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

  •                                             <a href="###" class="ax-btn" id="load">点击确认</a>
                                                <a href="###" class="ax-btn" id="wating"><i>点击确认</i></a>
                                            
  •             let load = document.querySelector('#load');
                load.onclick = function(){
                    let _this = this;
                    _this.innerHTML = '确认中...';
                    _this.insertAdjacentHTML('afterbegin', '');
                    setTimeout(function(){
                        _this.innerHTML = '已确认';
                        alert('已确认');
                    },3000)
                }
                let waiting = document.querySelector('#waiting');
                wating.onclick = function(){
                    let _this = this,
                        child = _this.firstChild;
                        child.innerHTML = '确认中';
                        child.classList.add('ax-waiting');
                    setTimeout(function(){
                        child.innerHTML = '已确认';
                        child.classList.remove('ax-waiting');
                        alert('已确认');
                    },3000)
                }
                                            

图标按钮

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-f"></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-f"></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-f"></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-f"></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-f"></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-f"></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-btnax-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类表示禁止用户操作。inputbutton标签不适合使用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类包裹。注意一:如果组合按钮中只有一个按钮建议使用单个按钮而不使用组合按钮;注意二:由于框架将aspan元素定义为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-f"></span></a><a href="###" class="ax-btn ax-icon"><span class="ax-iconfont ax-icon-shield-f"></span></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>