按钮

AUI支持为 <a> 、<button> 、<input> 、<div> 增加 .aui-btn 来使用按钮效果。使用 .aui-btn-* 来选择使用AUI提供的样式

<button class="aui-btn aui-btn-primary">BUTTON</button>
<a class="aui-btn aui-btn-success">BUTTON</a>
<input type="button" class="aui-btn aui-btn-danger" value="BUTTON" >
<div class="aui-btn aui-btn-success">BUTTON</div>

自定义样式的方法：

<style>
.orange {
    background-color:#ff9900;
    border:1px solid #ff9900;
    color:#ffffff;
}
</style>
<button class="aui-btn oranger">BUTTON</button>

添加 .active 可以将按钮样式设置为按下状态的样式：

<button class="aui-btn aui-btn-primary active">BUTTON</button>

块级按钮

.aui-btn-block 为宽度100%自动适应的按钮

<button class="aui-btn-block aui-btn-primary">BUTTON</button>

镂空按钮

.aui-btn-outlined 为镂空的按钮

<button class="aui-btn-outlined aui-btn-primary">BUTTON</button>

示例源码

<div class="aui-content-padded">
    <p>普通按钮（.aui-btn-*）</p>
    <div class="aui-btn">默认按钮(default)</div>
    <div class="aui-btn aui-btn-primary">默认按钮(primary)</div>
    <div class="aui-btn aui-btn-success">默认按钮(success)</div>
    <div class="aui-btn aui-btn-info">默认按钮(info)</div>
    <div class="aui-btn aui-btn-warning">默认按钮(warning)</div>
    <div class="aui-btn aui-btn-danger">默认按钮(danger)</div>
    <div class="aui-btn aui-btn-info"><span class="aui-iconfont aui-icon-edit"></span>图标按钮</div>
    <div class="aui-btn aui-btn-info">图标按钮</div>

    <p>普通镂空按钮（.aui-btn.aui-btn-outlined）</p>
    <div class="aui-btn aui-btn-outlined">默认按钮(default)</div>
    <div class="aui-btn aui-btn-primary aui-btn-outlined">默认按钮(primary)</div>
    <div class="aui-btn aui-btn-success aui-btn-outlined">默认按钮(success)</div>
    <div class="aui-btn aui-btn-info aui-btn-outlined">默认按钮(info)</div>
    <div class="aui-btn aui-btn-warning aui-btn-outlined">默认按钮(warning)</div>
    <div class="aui-btn aui-btn-danger aui-btn-outlined">默认按钮(danger)</div>
    <div class="aui-btn aui-btn-info aui-btn-outlined"><span class="aui-iconfont aui-icon-edit"></span>图标按钮</div>
    <div class="aui-btn aui-btn-info aui-btn-outlined">图标按钮</div>

    <p>块按钮类（.aui-btn-block）</p>
    <div class="aui-btn aui-btn-block">默认按钮(default)</div>
    <div class="aui-btn aui-btn-primary aui-btn-block">默认按钮(primary)</div>
    <div class="aui-btn aui-btn-success aui-btn-block">默认按钮(success)</div>
    <div class="aui-btn aui-btn-info aui-btn-block">默认按钮(info)</div>
    <div class="aui-btn aui-btn-warning aui-btn-block">默认按钮(warning)</div>
    <div class="aui-btn aui-btn-danger aui-btn-block">默认按钮(danger)</div>

    <p>镂空按钮（.aui-btn-block.aui-btn-outlined）</p>
    <div class="aui-btn aui-btn-block aui-btn-outlined">默认按钮(default)</div>
    <div class="aui-btn aui-btn-primary aui-btn-block aui-btn-outlined">默认按钮(primary)</div>
    <div class="aui-btn aui-btn-success aui-btn-block aui-btn-outlined">默认按钮(success)</div>
    <div class="aui-btn aui-btn-info aui-btn-block aui-btn-outlined">默认按钮(info)</div>
    <div class="aui-btn aui-btn-warning aui-btn-block aui-btn-outlined">默认按钮(warning)</div>
    <div class="aui-btn aui-btn-danger aui-btn-block aui-btn-outlined">默认按钮(danger)</div>

    <p>小号块按钮类（.aui-btn-sm）</p>
    <div class="aui-btn aui-btn-block aui-btn-sm">默认按钮(default)</div>
    <div class="aui-btn aui-btn-primary aui-btn-block aui-btn-sm">默认按钮(primary)</div>
    <div class="aui-btn aui-btn-success aui-btn-block aui-btn-sm">默认按钮(success)</div>
    <div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm">默认按钮(info)</div>
    <div class="aui-btn aui-btn-warning aui-btn-block aui-btn-sm">默认按钮(warning)</div>
    <div class="aui-btn aui-btn-danger aui-btn-block aui-btn-sm">默认按钮(danger)</div>

    <p>小号镂空按钮类（.aui-btn-sm.aui-btn-outlined）</p>
    <div class="aui-btn aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(default)</div>
    <div class="aui-btn aui-btn-primary aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(primary)</div>
    <div class="aui-btn aui-btn-success aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(success)</div>
    <div class="aui-btn aui-btn-info aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(info)</div>
    <div class="aui-btn aui-btn-warning aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(warning)</div>
    <div class="aui-btn aui-btn-danger aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(danger)</div>
</div>