简介

老规矩，不多废话，直接开撸，参考菜鸟教程

默认情况下，按钮显示样式为：display: inline-block。

<p><button class="button button-light">button-light</button>
</p><p><button class="button button-stable">button-stable</button>
</p><p><button class="button button-positive">button-positive</button>
</p><p><button class="button button-calm">button-calm</button>
</p><p><button class="button button-balanced">button-balanced</button>
</p><p><button class="button button-energized">button-energized</button>
</p><p><button class="button button-assertive">button-assertive</button>
</p><p><button class="button button-royal">button-royal</button>
</p><p><button class="button button-dark">button-dark</button></p>

效果如下

button-block 样式按钮显示为：display: block，它将完全填充父元素的宽度，包含了内边距属性padding。

<button class="button button-block button-light">button-light</button>
<button class="button button-block button-stable">button-stable</button>
<button class="button button-block button-positive">button-positive</button>
<button class="button button-block button-calm">button-calm</button>
<button class="button button-block button-balanced">button-balanced</button>
<button class="button button-block button-energized">button-energized</button>
<button class="button button-block button-assertive">button-assertive</button>
<button class="button button-block button-royal">button-royal</button>
<button class="button button-block button-dark">button-dark</button>

使用 button-full 类，可以让按钮显示完全宽度，且不包含内边距padding。

<button class="button button-full button-light">button-light</button>
<button class="button button-full button-stable">button-stable</button>
<button class="button button-full button-positive">button-positive</button>
<button class="button button-full button-calm">button-calm</button>
<button class="button button-full button-balanced">button-balanced</button>
<button class="button button-full button-energized">button-energized</button>
<button class="button button-full button-assertive">button-assertive</button>
<button class="button button-full button-royal">button-royal</button>
<button class="button button-full button-dark">button-dark</button>

button-large 设置为大按钮，button-small 设置为小按钮。真是通俗易懂，简单明了。

<p><button class="button button-small button-light">天下行走</button>
</p><p><button class="button button-small button-stable">天下行走</button>
</p><p><button class="button button-small button-positive">天下行走</button>
</p><p><button class="button button-small button-calm">天下行走</button>
</p><p><button class="button button-small button-balanced">天下行走</button>
</p><p><button class="button button-energized">天下行走</button>
</p><p><button class="button button-large button-assertive">天下行走</button>
</p><p><button class="button button-large button-royal">天下行走</button>
</p><p><button class="button button-large button-dark">天下行走</button></p>

button-outline 设置背景为透明。正常状态下除了边框都是透明的，点击时才会出现颜色。

<button class="button button-block button-outline button-light">button-light</button>
<button class="button button-block button-outline button-stable">button-stable</button>
<button class="button button-block button-outline button-positive">button-positive</button>
<button class="button button-block button-outline button-calm">button-calm</button>
<button class="button button-block button-outline button-balanced">button-balanced</button>
<button class="button button-block button-outline button-energized">button-energized</button>
<button class="button button-block button-outline button-assertive">button-assertive</button>
<button class="button button-block button-outline button-royal">button-royal</button>
<button class="button button-block button-outline button-dark">button-dark</button>

正常状态
点击状态

当然如果你嫌边框碍事的话，也有不含边框的写法

<button class="button button-block button-clear button-light">button-light</button>
<button class="button button-block button-clear button-stable">button-stable</button>
<button class="button button-block button-clear button-positive">button-positive</button>
<button class="button button-block button-clear button-calm">button-calm</button>
<button class="button button-block button-clear button-balanced">button-balanced</button>
<button class="button button-block button-clear button-energized">button-energized</button>
<button class="button button-block button-clear button-assertive">button-assertive</button>
<button class="button button-block button-clear button-royal">button-royal</button>
<button class="button button-block button-clear button-dark">button-dark</button>

点击之后字体会变色，并不是像上面那个整个框都变深色，这个并没有框的概念，理解下就行了，这里不作截图

接下来介绍图标的用法，顺便总结上面的写法

<p><button class="button button-block icon-left ion-home">Home</button></p>
<p><button class="button button-block icon-left ion-star button-positive">Favorites</button></p>
<p><a class="button button-block icon-right ion-chevron-right button-calm">Learn More</a></p>
<p><a class="button button-block icon-left ion-chevron-left button-clear button-dark">Back</a></p>
<p><button class="button button-block icon ion-gear-a"></button></p>
<p><a class="button button-block button-icon icon ion-settings"></a></p>
<p><a class="button button-block button-outline icon-right ion-navicon button-balanced">Reorder</a></p>

效果图如下，看起来美美哒 ?

其实还有看起来更美的，效果图如下

代码如下

<!-- 头部按钮栏 -->
<div class="bar bar-header">
  <div class="bar bar-header">
    <div class="button-bar">
      <a class="button activated">First</a>
      <a class="button">Second</a>
      <a class="button">Third</a>
    </div>
  </div>
</div>

<!-- 内容页上的按钮栏 -->
<div class="content has-header padding scroll scroll-content" style="overflow-y:auto">
  <p>
  </p><div class="button-bar bar-light">
  <a class="button  icon-left ion-star ">First</a>
  <a class="button  icon-left ion-star ">Second</a>
  <a class="button  icon-left ion-star ">Third</a>
</div>
  <p>
  </p><div class="button-bar bar-stable">
  <a class="button  icon-left ion-home">First</a>
  <a class="button  icon-left ion-home">Second</a>
  <a class="button  icon-left ion-home">Third</a>
</div>
  <p>
  </p><div class="button-bar bar-positive">
  <a class="button  icon ion-gear-a"></a>
  <a class="button  icon ion-gear-a"></a>
  <a class="button  icon ion-gear-a"></a>
</div>
  <p>
  </p><div class="button-bar bar-energized">
  <a class="button  icon-right ion-navicon">First</a>
  <a class="button  icon-right ion-navicon">Second</a>
  <a class="button  icon-right ion-navicon">Third</a>
</div>
  <p>
  </p><div class="button-bar bar-balanced">
  <a class="button">First</a>
  <a class="button">Second</a>
  <a class="button">Third</a>
</div>
  <p></p>
  <p>
  </p><div class="button-bar bar-assertive">
  <a class="button">First</a>
  <a class="button">Second</a>
  <a class="button">Third</a>
</div>
  <p></p>
  <p>
  </p><div class="button-bar bar-royal">
  <a class="button">First</a>
  <a class="button">Second</a>
  <a class="button">Third</a>
</div>
  <p></p>
</div>
<div class="bar bar-footer">
  <button class="button icon ion-navicon"></button>
  <button class="button button-clear button-positive">Edit</button>
</div>