按钮

默认按钮

框架用.button定义默认按钮样式。

    <button class="button">默认按钮</button>
    <input class="button" value="表单按钮" type="button" />
    <a class="button" href="javascript:;">链接按钮</a>
  

按钮颜色

除默认的外，还可以自定义按钮的文本色、边框色及背景色，相关颜色的定义，请参考颜色。

按钮文本色

在.button的基础上，叠加.text-颜色样式，可改变按钮文本颜色。

    <button class="button text">默认按钮</button>

    <button class="button text-main">主色按钮</button>
    <button class="button text-sub">辅色按钮</button>
    <button class="button text-dot">点缀按钮</button>

    <button class="button text-black">黑色按钮</button>
    <button class="button text-deep">深色按钮</button>
    <button class="button text-dark">暗色按钮</button>
    <button class="button text-gray">灰色按钮</button>
    <button class="button text-silver">银色按钮</button>
    <button class="button text-light">亮色按钮</button>
    <button class="button text-white">白色按钮</button>

    <button class="button text-danger">危险按钮</button>
    <button class="button text-warning">警告按钮</button>
    <button class="button text-success">安全按钮</button>
    <button class="button text-info">信息按钮</button>
  

按钮边框色

在.button的基础上，叠加.border-颜色样式，可改变按钮边框颜色。

    <button class="button border">默认按钮</button>

    <button class="button border-main">主色按钮</button>
    <button class="button border-sub">辅色按钮</button>
    <button class="button border-dot">点缀按钮</button>

    <button class="button border-black">黑色按钮</button>
    <button class="button border-deep">深色按钮</button>
    <button class="button border-dark">暗色按钮</button>
    <button class="button border-gray">灰色按钮</button>
    <button class="button border-silver">银色按钮</button>
    <button class="button border-light">亮色按钮</button>
    <button class="button border-white">白色按钮</button>

    <button class="button border-danger">危险按钮</button>
    <button class="button border-warning">警告按钮</button>
    <button class="button border-success">安全按钮</button>
    <button class="button border-info">信息按钮</button>
  

按钮背景色

在.button的基础上，叠加.bg-颜色样式，可改变按钮背景颜色。

    <button class="button bg">默认按钮</button>

    <button class="button bg-main">主色按钮</button>
    <button class="button bg-sub">辅色按钮</button>
    <button class="button bg-dot">点缀按钮</button>

    <button class="button bg-black">黑色按钮</button>
    <button class="button bg-deep">深色按钮</button>
    <button class="button bg-dark">暗色按钮</button>
    <button class="button bg-gray">灰色按钮</button>
    <button class="button bg-silver">银色按钮</button>
    <button class="button bg-light">亮色按钮</button>
    <button class="button bg-white">白色按钮</button>

    <button class="button bg-danger">危险按钮</button>
    <button class="button bg-warning">警告按钮</button>
    <button class="button bg-success">安全按钮</button>
    <button class="button bg-info">信息按钮</button>
  

禁用按钮

禁用按钮含disabled属性按钮，点击不可操作。

    <button class="button" disabled="disabled">默认按钮</button>
    <input class="button border-main" value="表单按钮" type="button" disabled="disabled" />
    <a class="button bg-main" href="javascript:;" disabled="disabled">链接按钮</a>
  

按钮圆角

按钮默认为有圆角，也可通过.radius-大小来改变圆角大小。

    <button class="button radius-mini">微小圆角按钮</button>
    <button class="button radius-small">小圆角按钮</button>
    <button class="button radius">默认圆角按钮</button>
    <button class="button border-main radius-big">大圆角按钮</button>
    <button class="button bg-main radius-large">圆角按钮</button>
    <button class="button bg-main radius-none">直角按钮</button>
  

按钮尺寸

框架定义按钮填充大小，使用.button-大小来改变按钮内部的填充大小。

    <button class="button button-mini">微小按钮</button>
    <button class="button button-small">小按钮</button>
    <button class="button">默认按钮</button>
    <button class="button button-big">大按钮</button>
    <button class="button button-large">特大按钮</button>
  

同时也可以使用文本样式.size-大小改变文字大小。

    <button class="button button-mini size-mini">微小按钮</button>
    <button class="button button-small size-small">小按钮</button>
    <button class="button">默认按钮</button>
    <button class="button button-big size-big">大按钮</button>
    <button class="button button-large size-large">特大按钮</button>
  

图标按钮

图标按钮默认为圆形按钮，用.button-icon定义。

    <button class="button button-icon">标</button>
    <button class="button button-icon text-main">标</button>
    <button class="button button-icon border-main size-big">标</button>
    <button class="button button-icon bg-main size-large">标</button>
  

按钮块

按钮块这100%宽按钮，用.button-block定义。

    <button class="button button-block">按钮块</button>
    <button class="button button-block text-main">按钮块</button>
    <button class="button button-block border-main size-big">按钮块</button>
    <button class="button button-block bg-main size-large">按钮块</button>
  

灵活的使用颜色及文本属性，按钮样式即可千变万化。