按鈕

當您需要更傳統的動作時，按鈕是很方便的工具。因此，Foundation 有許多易於使用的按鈕樣式，您可以自訂或覆寫以符合您的需求。

基礎知識

可以使用最少的標記建立一個基本按鈕。由於按鈕可以有多種用途，因此使用正確的標籤非常重要。

如果按鈕是連結到另一個頁面或連結到頁面中的錨點，請使用 <a> 標籤。一般來說，錨點不需要 JavaScript 就能運作。
如果按鈕執行一個會變更目前頁面中某個項目的動作，請使用 <button> 標籤。<button> 元素幾乎總是需要 JavaScript 才能運作。

將屬性 type="button" 加入 <button> 元素，除非按鈕會提交表單，否則應加入類別 `.submit` 並移除 type="button"

<!-- Anchors (links) -->
<a href="about.html" class="button">Learn More</a>
<a href="#features" class="button">View All Features</a>

<!-- Buttons (actions) -->
<button class="submit success button">Save</button>
<button type="button" class="alert button">Delete</button>

了解更多查看所有功能

調整大小

可加入其他類別至按鈕以變更其大小和形狀。

觀看影片中的此部分

<a class="button tiny" href="#">So Tiny</a>
<a class="button small" href="#">So Small</a>
<a class="button" href="#">So Basic</a>
<a class="button large" href="#">So Large</a>
<a class="button expanded" href="#">Such Expand</a>
<a class="button small expanded" href="#">Wow, Small Expand</a>

如此迷你如此小巧如此基本如此巨大如此展開哇，小展開

回應式展開按鈕

如果您使用 Sass 版本，您可以透過將 $button-responsive-expanded 變數變更為 true 來啟用這些額外的回應式按鈕展開類別。（預設為 false 以縮小 CSS 檔案大小。）

對於 CSS 下載使用者，您可以在此取得 CSS並將其加入您的樣式表。

<a class="button small small-only-expanded" href="#">Wow, Expand only on small viewport</a>
<a class="button small medium-only-expanded" href="#">Expand only on medium viewport</a>
<a class="button small large-only-expanded" href="#">Expand only on large viewport</a>

<a class="button small medium-expanded" href="#">Wow, Expand on medium and larger</a>
<a class="button small large-expanded" href="#">Expand on large and larger</a>

<a class="button small medium-down-expanded" href="#">Expand on medium and smaller</a>
<a class="button small large-down-expanded" href="#">Expand on large and smaller</a>

哇，僅在小視窗展開僅在中型視窗展開僅在大視窗展開哇，在中型及以上視窗展開在大及以上視窗展開在中型及以下視窗展開在大及以下視窗展開

色彩

加入色彩類別以賦予按鈕額外的意義。

觀看影片中的此部分

<a class="button primary" href="#">Primary</a>
<a class="button secondary" href="#">Secondary</a>
<a class="button success" href="#">Success</a>
<a class="button alert" href="#">Alert</a>
<a class="button warning" href="#">Warning</a>

主要次要成功警示警告

自訂色彩

如果您使用 Foundation 的 Sass 版本，您可以透過編輯設定檔中的 $button-palette 地圖來自訂按鈕類別。按鈕調色盤預設為 $foundation-palette。

如果您不需要預設調色盤中的特定顏色，只需將它們從清單中移除即可。

$button-palette: map-remove($foundation-palette, (
    primary,
    secondary
));

或者，您可以將更多顏色新增到預設調色盤中。

$button-palette: map-merge($foundation-palette, (
    purple: #bb00ff
));

或者，您可以定義您自己的自訂按鈕調色盤。

$button-palette: (
    black: #000000,
    red: #ff0000,
    purple: #bb00ff
);

文字顏色

每個按鈕類別的文字顏色由 $button-color 或 $button-color-alt 決定，對比度較高的設定變數會優先使用。

預設設定符合 WCAG 2.0 AA 級對比度需求。變更顏色變數時，務必 [檢查對比度](https://webaim.org/resources/contrastchecker/)。若要讓所有按鈕的文字顏色相同，請將 `$button-color` 和 `$button-color-alt` 設定為相同的值，但請注意這樣做可能會降低可及性。

空心樣式

將 .hollow 類別新增到按鈕中，即可讓按鈕呈現空心樣式。變更設定檔中的 $button-fill 變數為 hollow，即可將此設定為預設樣式。變更此設定會從您的 CSS 中移除 .hollow 類別。

<button class="hollow button" href="#">Primary</button>
<button class="hollow button secondary" href="#">Secondary</button>
<button class="hollow button success" href="#">Success</button>
<button class="hollow button alert" href="#">Alert</button>
<button class="hollow button warning" href="#">Warning</button>
<button class="hollow button" href="#" disabled>Disabled</button>

已停用按鈕

.disabled 類別會讓按鈕呈現淡化的外觀。此類別是一種純粹的視覺樣式，並不會實際停用控制項。對於 <button> 元素，您可以新增 disabled 屬性來同時停用並設定其樣式。如果您要停用連結，您應該新增 aria-disabled 屬性，以標記其對輔助技術已停用。

觀看影片中的此部分

<a class="button disabled" href="#" aria-disabled>Disabled</a>
<button type="button" class="button primary" disabled>Disabled</button>
<button type="button" class="button secondary" disabled>Disabled</button>
<button type="button" class="button success" disabled>Disabled</button>
<button type="button" class="button alert" disabled>Disabled</button>
<button type="button" class="button warning" disabled>Disabled</button>

已停用

或者，您也可以使用已停用的空心按鈕。

<a class="button hollow disabled" href="#" aria-disabled>Disabled</a>
<button type="button" class="button hollow primary" disabled>Disabled</button>
<button type="button" class="button hollow secondary" disabled>Disabled</button>
<button type="button" class="button hollow success" disabled>Disabled</button>
<button type="button" class="button hollow alert" disabled>Disabled</button>
<button type="button" class="button hollow warning" disabled>Disabled</button>

已停用

清除樣式

將 .clear 類別新增到按鈕中，即可讓按鈕呈現清除樣式。變更設定檔中的 $button-fill 變數為 clear，即可將此設定為預設樣式。變更此設定會從您的 CSS 中移除 .clear 類別。

觀看影片中的此部分

<a class="clear button" href="#">Primary</a>
<a class="clear button secondary" href="#">Secondary</a>
<a class="clear button success" href="#">Success</a>
<a class="clear button alert" href="#">Alert</a>
<a class="clear button warning" href="#">Warning</a>
<a class="clear button" href="#" disabled>Disabled</a>

主要次要成功警示警告已停用

這特別適用於次要動作按鈕。這樣您就能獲得適當的間距和行高。範例

使用 .dropdown 類別，為按鈕新增下拉式箭頭。

這不會自動新增下拉式功能。若要執行此動作，您可以附加我們的下拉式外掛程式。

<button class="dropdown button tiny">Dropdown Button</button>
<button class="dropdown button small">Dropdown Button</button>
<button class="dropdown button">Dropdown Button</button>
<button class="dropdown button large">Dropdown Button</button>
<button class="dropdown button expanded">Dropdown Button</button>

輔助功能

請確定按鈕文字具有描述性。如果出於某些原因，您的按鈕不包含可讀文字（例如，僅符號或圖示），請將僅螢幕閱讀器文字新增至按鈕，以說明其用途。符號或圖示應包覆在具有屬性 aria-hidden="true" 的元素中，以防止螢幕閱讀器嘗試發音符號。

使用 .show-for-sr 類別定義僅螢幕閱讀器文字。

<button class="button" type="button">
  <!-- Screen readers will see "close" -->
  <span class="show-for-sr">Close</span>
  <!-- Visual users will see the X, but not the "Close" text -->
  <span aria-hidden="true"><i class="fi-x"></i></span>
</button>

Sass 參考

變數

此元件的預設樣式可以使用專案設定檔中的這些 Sass 變數進行自訂。

名稱	類型	預設值	說明
`$button-font-family`	字型	`inherit`	按鈕元素的字型系列。
`$button-font-weight`	字重	`null`	按鈕元素的字重。如果為 null（預設值），則忽略
`$button-padding`	清單	`0.85em 1em`	按鈕內的內距。
`$button-margin`	清單	`0 0 $global-margin 0`	按鈕周圍的外距。
`$button-fill`	關鍵字	`solid`	按鈕的預設填滿。可以是 `solid` 或 `hollow`。
`$button-background`	顏色	`$primary-color`	按鈕的預設背景顏色。
`$button-background-hover`	顏色	`scale-color($button-background, $lightness: -15%)`	按鈕在滑鼠移入時的背景顏色。
`$button-color`	清單	`$white`	按鈕的字型顏色。
`$button-color-alt`	清單	`$black`	按鈕的替代字體顏色。
`$button-radius`	數字	`$global-radius`	按鈕的邊框半徑，預設為 global-radius。
`$button-border`	清單	`1px 實線透明`	按鈕的邊框，預設為透明
`$button-hollow-border-width`	數字	`1px`	空心外框按鈕的邊框寬度
`$button-sizes`	地圖	`tiny: 0.6rem small: 0.75rem default: 0.9rem large: 1.25rem`	按鈕的大小。
`$button-palette`	地圖	`$foundation-palette`	著色類別。一個類別地圖，用於在 CSS 中輸出，例如 `.secondary`、`.success` 等。
`$button-opacity-disabled`	清單	`0.25`	已停用按鈕的不透明度。
`$button-background-hover-lightness`	數字	`-20%`	按鈕滑鼠移入時的背景顏色明度。
`$button-hollow-hover-lightness`	數字	`-50%`	空心按鈕滑鼠移入時的顏色明度。
`$button-transition`	清單	`background-color 0.25s ease-out, color 0.25s ease-out`	按鈕的轉場。
`$button-responsive-expanded`	布林值	`false`	額外的 .expanded 響應式類別

混合

我們使用這些混合來建構此元件的最終 CSS 輸出。您可以自行使用混合，從我們的元件中建構自己的類別結構。

button-expand

@include button-expand($expand);

將按鈕擴充為全寬。

參數	類型	預設值	說明
`$expand`	布林值	`true`	設定為 `true` 以啟用擴充行為。設定為 `false` 以反轉此行為。

button-fill

@include button-fill($fill);

根據 $fill 設定空心或透明按鈕填滿的基本樣式。請參閱混合 button-fill-style 以取得填滿樣式。

參數	類型	預設值	說明
`$fill`	關鍵字	`$button-fill`	`hollow` 和 `clear` 之間的填滿類型。`solid` 沒有效果。

button-fill-style

@include button-fill-style($fill, $background, $background-hover, $color);

根據 $fill 設定實心/空心/透明按鈕填滿的視覺樣式。請參閱混合 button-style、button-hollow-style 和 button-clear-style 以取得視覺樣式參數的效果。

參數	類型	預設值	說明
`$fill`	關鍵字	`$button-fill`	`hollow` 和 `clear` 之間的填滿類型。
`$background`	顏色	`$button-background`	-
`$background-hover`	顏色	`$button-background-hover`	-
`$color`	顏色	`$button-color`	-

button-style

@include button-style($background, $background-hover, $color);

設定按鈕的視覺樣式。

參數	類型	預設值	說明
`$background`	顏色	`$button-background`	按鈕的背景顏色。
`$background-hover`	顏色	`$button-background-hover`	按鈕滑鼠移入時的背景顏色。設定為 `auto`，讓混合自動產生滑鼠移入顏色。
`$color`	顏色	`$button-color`	按鈕的文字顏色。設定為 `auto`，根據背景顏色自動產生顏色。

button-hollow

@include button-hollow;

設定空心按鈕的基本樣式。有關填滿樣式，請參閱混合 button-hollow-style。

button-hollow-style

@include button-hollow-style($color, $hover-lightness, $border-width);

設定空心按鈕的視覺樣式。

參數	類型	預設值	說明
`$color`	顏色	`$button-background`	按鈕的文字和邊框顏色。
`$hover-lightness`	顏色	`$button-hollow-hover-lightness`	滑鼠移入時的顏色亮度。
`$border-width`	顏色	`$button-hollow-border-width`	按鈕的邊框寬度。

button-clear

@include button-clear;

設定清除按鈕的基本樣式。有關填滿樣式，請參閱混合 button-clear-style。

button-clear-style

@include button-clear-style($color, $hover-lightness);

設定清除按鈕的視覺樣式。

參數	類型	預設值	說明
`$color`	顏色	`$button-background`	按鈕的文字顏色。
`$hover-lightness`	顏色	`$button-hollow-hover-lightness`	滑鼠移入時的顏色亮度。

button-disabled

@include button-disabled($opacity);

透過淡化元素並重設游標，將停用樣式新增至按鈕。

參數	類型	預設值	說明
`$opacity`	數字	`$button-opacity-disabled`	停用按鈕的不透明度。

@include button-dropdown($size, $color, $offset);

將下拉式箭頭新增至按鈕。

參數	類型	預設值	說明
`$size`	數字	`0.4em`	箭頭大小。建議使用 `em` 值，以便箭頭在不同大小的按鈕中使用時會縮放。
`$color`	顏色	`white`	箭頭顏色。
`$offset`	數字	`$button-padding`	箭頭和按鈕文字之間的距離。預設為按鈕右邊距的任何值。

button

@include button($expand, $background, $background-hover, $color, $style);

新增按鈕的所有樣式。如需更精細地控制樣式，請使用個別按鈕混合。

參數	類型	預設值	說明
`$expand`	布林值	`false`	設為 `true` 以使按鈕全寬。
`$background`	顏色	`$button-background`	按鈕的背景顏色。
`$background-hover`	顏色	`$button-background-hover`	按鈕滑鼠移入時的背景顏色。設定為 `auto`，讓混合自動產生滑鼠移入顏色。
`$color`	顏色	`$button-color`	按鈕的文字顏色。設定為 `auto`，根據背景顏色自動產生顏色。
`$style`	關鍵字	`solid`	設為 `hollow` 以建立空心按鈕。在 `$background` 中定義的顏色將用作按鈕的主要顏色。