按钮Button

支持<a>、<button>、<input>[submit，reset]元素

a:
<a href="#" class="btn">Button</a>
button:
<button type="button" class="btn">Button</button>
<button type="submit" class="btn">Submit</button>
<button type="reset" class="btn">Reset</button>
input:
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">

自定义Custom

以下所有属性都可以叠加使用

添加class="xs"转换为小按钮，添加class="xl"转换为大按钮

<button type="button" class="btn">Default</button>
<button type="button" class="btn xs">Small</button>
<button type="button" class="btn xl">Large</button>

自定义背景颜色属性，更多颜色属性请至属性中查询

<button type="button" class="btn xs bg-red">Red</button>
<button type="button" class="btn xs bg-orange">Orange</button>
<button type="button" class="btn xs bg-green">Green</button>
<button type="button" class="btn xs bg-blue">Blue</button>
<button type="button" class="btn xs bg-pink">Pink</button>

可添加图标（input元素的按钮不支持添加图标），添加class="disabled"转换为禁用按钮，添加class="square"转换为直角按钮

<button type="button" class="btn"><i class="flaticon-user151 mr3"></i>Icon and Text</button>
<button type="button" class="btn"><i class="flaticon-picture28"></i></button>
<button type="button" class="btn disabled">Disabled</button>
<button type="button" class="btn square">Square</button>

添加class="line"转换为width:100%

<button type="button" class="btn line">Line</button>

按钮组Button Group

添加父级元素<div class="btn-group">，将按钮群体转换为一个组件

<div class="btn-group">
    <button type="button" class="btn">Button1</button>
    <button type="button" class="btn">Button2</button>
    <button type="button" class="btn">Button3</button>
</div>

添加class="vertical"转换为垂直排列

<div class="btn-group vertical">
    ...
</div>

添加class="square"转换为直角按钮

<div class="btn-group square">
    ...
</div>

叠加按钮的私有属性，其中class="square"与class="line"将无效

<div class="btn-group">
    <button type="button" class="btn xl">Button1</button>
    <button type="button" class="btn xl disabled">Button2</button>
    <button type="button" class="btn xl">Button3</button>
</div>
<div class="btn-group">
    <button type="button" class="btn xs bg-navy icon"><i class="flaticon-picture28"></i></button>
    <button type="button" class="btn xs bg-navy icon"><i class="flaticon-play87"></i></button>
    <button type="button" class="btn xs bg-navy icon"><i class="flaticon-settings46"></i></button>
</div>

自定义风格Custom Style

可以使用自定义风格工具快速创建CSS

<button type="button" class="btn mystyle">Button</button>
<div class="btn-group mystyle">
    <button type="button" class="btn mystyle">Button1</button>
    <button type="button" class="btn mystyle">Button2</button>
    <button type="button" class="btn mystyle">Button3</button>
</div>
<div class="btn-group vertical mystyle">
    <button type="button" class="btn mystyle">Button1</button>
    <button type="button" class="btn mystyle">Button2</button>
    <button type="button" class="btn mystyle">Button3</button>
</div>