如何設定按鈕的樣式

發行項
03/04/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

這裡有許多您可以用來設定 button 樣式的 CSS 屬性和虛擬類別。本主題說明一些較常使用的屬性和虛擬類別。它也提供如何使用 win-backbutton CSS 類別的範例，該類別由 WinJS 提供。

您必須知道的事

技術

先決條件

快速入門：新增按鈕

有用的 CSS 屬性

CSS 提供許多您可以用來設定 HTML 元素樣式的屬性。但是這些屬性的清單很長，需要花費很多時間閱讀。以下是簡短的 CSS 屬性清單，對於設定 button 控制項的樣式特別有用。

font-family
指定用於按鈕文字的字型。這個範例將 font-family 設定成 "Segoe UI Light"。
```
<button id="fontFamilyButton" style="font-family: 'Segoe UI Light'">A button</button>
```
font-size
指定用於按鈕文字的字型大小。您可以使用數個不同的格式，例如絕對大小、相對大小、絕對長度值或百分比。如需詳細資訊，請參閱 font-size 參考。

這個範例將 font-family 設為 20 點。
```
<button id="fontSizeButton" style="font-family: 'Segoe UI Light'; font-size: 20pt">A button</button>
```

color
指定按鈕文字的色彩。

這個範例示範設定 color 屬性的數個方式。

<button id="pinkButton1" style="color: DeepPink">A button</button>
<button id="pinkButton2" style="color: #FF1493">A button</button>
<button id="pinkButton3" style="color: rgb(255, 20, 147);">A button</button>

background-color
指定按鈕表面的色彩。

這個範例示範設定 background-color 屬性的數個方式。

<button id="backgroundButton1" style="background-color: Black">A button</button>
<button id="backgroundButton2" style="background-color: #000000">A button</button>
<button id="backgroundButton3" style="background-color: rgb(0, 0, 0);">A button</button>

border
指定按鈕框線的粗細、線條樣式和色彩。

這個範例會在按鈕周圍建立一個 2 個像素的實線框線。
```
<button id="borderButton" style="border: 2px solid rgb(255, 20, 147);">A button</button>
```

(請注意，這並不是您可使用的所有項目的完整清單。如需所有 CSS 屬性的完整清單，請參閱階層式樣式表參考)。

用來設定按鈕控制項樣式的虛擬元素

button 控制項不具有可設定樣式的任何虛擬元素。

用來設定按鈕控制項樣式的虛擬類別

這個控制項支援的下列虛擬類別可讓您當成選取器，在該控制項處於特定狀態時設定其樣式。

:hover
當使用者將游標放在 button 上但並未按一下予以啟用時，將樣式套用到 button 控制項。

這個範例會定義暫留狀態的 button 樣式。
```
#hoverButton:hover {
    background-color: deeppink;
}
```
```
<button id="hoverButton">A button</button>
```
:active
啟用控制項時將樣式套用到 button 控制項。button 會在使用者按下控制項和釋放控制項的這段時間內啟用。如果使用者按下控制項然後將指標拖曳離開按鈕，在使用者釋放指標之前控制項仍為啟用。

這個範例會變更啟用的 button 的背景色彩。
```
#activeButton:active {
    font-weight: bold;
    border-color: deeppink;
}
```
```
<button id="activeButton">A button</button>
```
:focus
當控制項有焦點時將樣式套用到 button 控制項。有多種方法可讓焦點變為 button：
- 使用指標裝置指定 button。
- 使用 TAB 鍵和 Shift+TAB 鍵瀏覽到 button。
- 使用 keyboard shortcut 來選取 button。
這個範例會在 button 收到焦點時變更 button 的背景色彩。
```
#focusButton:focus {
   background-color: #ffc;
}
```
```
<button id="focusButton">A button</button>
```
:disabled
停用控制項時將樣式套用到 button 控制項。若要停用按鈕，請將 disabled 屬性新增至其 HTML 或將 JavaScript 中的 disabled 屬性設定成 true。

這個範例會停用按鈕，並為按鈕定義樣式。
```
#disabledButton:disabled {
   border-style: dotted;
}
```
```
<button id="disabledButton" disabled>A button</button>
```

(如需可以用於結合虛擬類別及其他選取器的不同方式的詳細資訊，請參閱了解 CSS 選取器)。

WinJS CSS 類別

WinJS 提供 CSS，您可以用來設定特定控制項的樣式。針對 button 控制項，提供 win-backbutton 類別。它提供 button 瀏覽按鈕的外觀，讓您回到之前的位置。

注意若要使用這個類別，您的頁面必須包含其中一個 WinJS 樣式表的參考。如需詳細資訊，請參閱適用於 JavaScript 的 Windows Library 樣式表。

這個範例使用 win-backbutton 類別讓 button 具有瀏覽按鈕的樣式。

<button id="backButton" class="win-backbutton"></button>

使用類別，讓 button 的外觀如下。

使用 win-backbutton 類別的按鈕

Share via