按钮

常用的操作按钮。

基础用法

使用.vus-btn类,为<input><button><a>标签或元素添加按钮效果。

默认(a)
<!-- input 按钮 -->
<input type="button" class="vus-btn" value="默认(input)">

<!-- button 按钮 -->
<button type="button" class="vus-btn">默认(button)</button>

<!-- a 标签按钮 -->
<a href="#" class="vus-btn">默认(a)</a>

按钮颜色

  • 添加下列类可以快速创建一个内定样式的按钮。
  • .primary:首选、主要。
  • .success:成功。
  • .warning:警告。
  • .danger:危险、错误。
  • .info:信息。
  • .dark:暗黑。
  • .light:亮灰。
  • .white:白色。
白色(white)
<button type="button" class="vus-btn primary">首选</button>
<button type="button" class="vus-btn success">成功</button>
<button type="button" class="vus-btn warning">警告</button>
<button type="button" class="vus-btn danger">危险</button>
<button type="button" class="vus-btn info">信息</button>
<button type="button" class="vus-btn dark">暗黑</button>
<button type="button" class="vus-btn light">亮灰</button>
<button type="button" class="vus-btn white">白色</button>

轮廓线按钮

添加.outline类,可以使按钮以轮廓线方式展示。

白色(white)
<button type="button" class="vus-btn primary outline">轮廓线按钮</button>

药丸形按钮

添加.vus-radius-large类,使按钮成药丸形状。(注:圆角属性请参阅圆角半径API文档。)

白色(white)
<button type="button" class="vus-btn vus-radius-large">药丸按钮</button>

按钮尺寸

  • 添加指定类,可设置不同大小的按钮。
  • .mini:超小按钮。
  • .small:小型按钮。
  • .large:大型按钮。
<button type="button" class="vus-btn mini">超小按钮</button>
<button type="button" class="vus-btn small">小型按钮</button>
<button type="button" class="vus-btn large">大型按钮</button>

禁用状态按钮

添加disabled属性或者.disabled类,可设置按钮为禁用状态。

默认(a)
白色(a)
<input type="button" class="vus-btn" value="默认(input)" disabled>
<button type="button" class="vus-btn" disabled>默认(button)</button>
<a href="#" class="vus-btn disabled">默认(a)</a>

块级按钮

添加.vus-fluid类,可以将按钮拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。

<button type="button" class="vus-btn vus-fluid">块级按钮</button>