按钮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="icon"转换为仅图标按钮,添加class="disabled"转换为禁用按钮,添加class="square"转换为直角按钮

<button type="button" class="btn"><i class="flaticon-user151"></i>Icon and Text</button>
<button type="button" class="btn icon"><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>

Box:
<div class="box50">
    <button type="button" class="btn line">Line</button>
</div>

按钮组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>