Foundation 按鈕

Foundation 提供了 6 種按鈕樣式。 <code>.button</code> 類建立了一個藍色的按鈕并附有内邊距。不同顔色按鈕類為： <code>.secondary</code>, <code>.success</code>, <code>.info</code>, <code>.warning</code> 或 <code>.alert</code>:

&lt;button type="button" class="button"&gt;Default&lt;/button&gt;

&lt;button

type="button" class="button secondary"&gt;Secondary&lt;/button&gt;

type="button" class="button success"&gt;Success&lt;/button&gt;

type="button" class="button info"&gt;Info&lt;/button&gt;

&lt;button type="button"

class="button warning"&gt;Warning&lt;/button&gt;

class="button alert"&gt;Alert&lt;/button&gt;

按鈕類可以使用在 <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, 或

<code>&lt;input&gt;</code> 元素:

&lt;a href="#" class="button info" role="button"&gt;Link Button&lt;/a&gt;

type="button" class="button info"&gt;Button&lt;/button&gt;

&lt;input type="button"

class="button info" value="Input Button"&gt;

&lt;input type="submit"

class="button info" value="Submit Button"&gt;

為什麼将 a 标簽的 href 設定為 # ?

當我們不希望連結點選跳轉并得到 "404"

頁面時，我們可以将 a 标簽的 href 設定為 #。

我們可以使用 <code>.large</code>, <code>.small</code> 或 <code>.tiny</code> 類來設定按鈕大小：

&lt;button type="button" class="button large"&gt;Large&lt;/button&gt;

type="button" class="button"&gt;Default&lt;/button&gt;

class="button small"&gt;Small&lt;/button&gt;

&lt;button type="button" class="button

tiny"&gt;Tiny&lt;/button&gt;

可以使用 <code>.radius</code> 和 <code>.round</code> 類來設定圓角按鈕：

&lt;button type="button" class="button"&gt;Default Button&lt;/button&gt;

radius"&gt;Radius Button&lt;/button&gt;

round"&gt;Round Button&lt;/button&gt;

可以使用 <code>.expand</code> 類來設定按鈕的寬度為 100%:

type="button" class="button expand"&gt;Expanded Button&lt;/button&gt;

可以使用 <code>.disabled</code> 類來設定按鈕不可點選:

type="button" class="button disabled"&gt;Disabled Button&lt;/button&gt;