How to style buttons
There's a lot of CSS properties and pseudo-classes that you can use to style a button. This topic describes some of the more commonly used properties and pseudo classes. It also provides an example of how to use the
CSS provides a lot of properties that you can use to style HTML elements. But the list of these properties is long and wading through it can be a bit daunting. Here's a short list of the CSS properties that are particularly useful for styling the button control.
Specifies the font to use for the button text. This example sets the font-family to "Segoe UI Light".
Specifies the size of the font to use for the button text. You can use several different formats, such as an absolute size, a relative size, an absolute length value, or a percentage. For more info, see the font-size reference.
This example sets the font-family to 20 points.
Specifies the color of the button text.
This example shows several ways to set the color property.
Specifies the color of the button face.
This example shows several ways to set the background-color property.
Specifies the thickness, line style, and color of the button's border.
This example creates a solid, 2-pixel border around the button.
(Note that this isn't a complete list of everything you can use. For a complete list of all CSS properties, see the Cascading Style Sheets reference.)
The button control doesn't have any pseudo-elements to style.
This control supports the following pseudo-classes that you can use as selectors to style the control when it’s in certain states.
Applies styles to a button control when the user places the cursor over the button but has not activated it by clicking.
This example defines a style for a button in the hover state.
Applies styles to a button control when the control is active. The button is active between the time the user presses the control and releases the control. If the user presses the control and drags the pointer off the button, the control is still active until the user releases the pointer.
This example changes the background color of an active button.
Applies styles to a button control when the control has focus. There are several ways to give focus to a button:
- Designate the button with a pointing device.
- Navigate to the button with the TAB and Shift+TAB keys.
- Select the button by using a keyboard shortcut.
This example changes the background color of a button when the button receives focus.
This example disables a button and defines a style for it.
(For more info about the different ways you can combine pseudo-classes and other selectors, see Understanding CSS selectors.)
The WinJS provides CSS that you can use to style certain controls. For the button control, there's the
win-backbutton class. It gives the button the appearance of a navigation button that lets you go back to the previous location.
This example uses the
win-backbutton class to give a button the style of a navigation button.
Using the class makes a button look like this.