按钮 Button

示例

基本形式

在<button>、<a>或<input>标签上使用.u-btn，三者样式完全一致。

<button class="u-btn">Button</button>
<a class="u-btn">Link</a>
<a class="u-btn" href="#">Link#</a>
<input class="u-btn" type="button" value="Input">
<input class="u-btn" type="submit" value="Submit">

颜色扩展

<button class="u-btn">Default</button>
<button class="u-btn u-btn-primary">Primary</button>
<button class="u-btn u-btn-info">Info</button>
<button class="u-btn u-btn-success">Success</button>
<button class="u-btn u-btn-warning">Warning</button>
<button class="u-btn u-btn-error">Error</button>

尺寸扩展

<button class="u-btn u-btn-xs">Extra Small</button>
<button class="u-btn u-btn-sm">Small</button>
<button class="u-btn">Normal</button>
<button class="u-btn u-btn-lg">Large</button>
<button class="u-btn u-btn-xl">Extra Large</button>

<p></p>

<button class="u-btn u-btn-primary u-btn-xs">Extra Small</button>
<button class="u-btn u-btn-primary u-btn-sm">Small</button>
<button class="u-btn u-btn-primary">Normal</button>
<button class="u-btn u-btn-primary u-btn-lg">Large</button>
<button class="u-btn u-btn-primary u-btn-xl">Extra Large</button>

禁用

<button class="u-btn z-dis">Disabled</button>
<a class="u-btn z-dis">Link</a>
<button class="u-btn u-btn-primary" disabled>Button</button>
<input class="u-btn u-btn-success" type="button" value="Input" disabled>
<input class="u-btn u-btn-error" type="submit" value="Submit" disabled>

整行

<button class="u-btn u-btn-primary u-btn-block">Block</button>
<p></p>
<a class="u-btn u-btn-block">Link</a>
<p></p>
<input class="u-btn u-btn-lg u-btn-block" type="button" value="Large Input">

按钮组

<div class="u-btngroup u-btngroup-horizontal">
    <button class="u-btn">Button1</button>
    <button class="u-btn">Button2</button>
    <button class="u-btn">Button3</button>
</div>
<div class="u-btngroup u-btngroup-vertical">
    <button class="u-btn">Button1</button>
    <button class="u-btn">Button2</button>
    <button class="u-btn">Button3</button>
</div>