如何设置按钮样式。

2016-03-04

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

有很多 CSS 属性和伪类，你可以用来设置 button 样式。本主题介绍一些比较常用的属性和伪类。还提供如何使用 win-backbuttonCSS 类的示例，该类由 WinJS 提供。

你需要了解的内容

技术

先决条件

快速入门：添加按钮

有用的 CSS 属性

CSS 提供很多属性，你可以用来设置 HTML 元素的样式。但这些属性列表较长，因而不适合在此全部讨论。下面是对设置 button 控件样式特别有用的 CSS 属性的简短列表。

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 样式表的引用。有关详细信息，请参阅 Windows Library for JavaScript 样式表。

本例使用 win-backbutton 类为 button 提供导航按钮的样式。

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

使用该类可以使 button 的外观如下所示。

使用 win-backbutton 类的按钮

通过