3. 按鈕 Buttons

列表

<ol class="list">
  <li>會有漂亮的列表</li>
</ol>

按鈕尺寸

<button class="small">小按鈕</button>
<button>一般按鈕</button>
<button class="large">大按鈕</button>

按鈕顏色

<button>一般按鈕（藍）</button>
<button class="error">錯誤按鈕（紅）</button>
<button class="warning">警告按鈕（橘）</button>
<button class="success">成功按鈕（綠）</button>
<button class="disabled">無效按鈕（灰）</button>

按鈕樣式

<button>一般小圓角按鈕</button>
<button class="square">矩形按鈕</button>
<button class="round">大圓角按鈕</button>
<button class="block">整區域按鈕</button>

按鈕綜合

<a class="small button">一般按鈕（小）藍色</a>
<a class="success button">成功按鈕（預設）綠色</a>
<a class="large error button">錯誤按鈕（大）紅色</a>

按鈕列表

<ul class="button-list">
  <li><a href="#" class="active">第一個按鈕（作用中）</a></li>
  <li><a href="#">第二個按鈕（正常按鈕）</a></li>
  <li><a href="#" class="disabled">第三個按鈕（鎖定中）</a></li>
</ul>

下拉選單按鈕

<span class="dropdown button">下拉選單按鈕
  <ul>
    <li><a href="#"><i class="icon-home"></i> 下拉項目 1</a></li>
    <li><a href="#"><i class="icon-envelope-alt"></i> 下拉項目 2</a></li>
    <hr>
    <li><a href="#"><i class="icon-heart"></i> 下拉項目 3</a></li>
  </ul>
</span>

2. 格線系統 The Grid