How to style buttons

Article
08/10/2016

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

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 win-backbuttonCSS class, which is provided by the Windows Library for JavaScript.

What you need to know

Technologies

Prerequisites

Quickstart: Adding a button

Useful CSS properties

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.

font-family
Specifies the font to use for the button text. This example sets the font-family to "Segoe UI Light".
```
<button id="fontFamilyButton" style="font-family: 'Segoe UI Light'">A button</button>
```
font-size
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.
```
<button id="fontSizeButton" style="font-family: 'Segoe UI Light'; font-size: 20pt">A button</button>
```

color
Specifies the color of the button text.

This example shows several ways to set the color property.

<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
Specifies the color of the button face.

This example shows several ways to set the background-color property.

<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
Specifies the thickness, line style, and color of the button's border.

This example creates a solid, 2-pixel border around the button.
```
<button id="borderButton" style="border: 2px solid rgb(255, 20, 147);">A button</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.)

Pseudo-elements for styling button controls

The button control doesn't have any pseudo-elements to style.

Pseudo-classes for styling button controls

This control supports the following pseudo-classes that you can use as selectors to style the control when it’s in certain states.

:hover
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.
```
#hoverButton:hover {
    background-color: deeppink;
}
```
```
<button id="hoverButton">A button</button>
```
:active
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.
```
#activeButton:active {
    font-weight: bold;
    border-color: deeppink;
}
```
```
<button id="activeButton">A button</button>
```
:focus
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.
```
#focusButton:focus {
   background-color: #ffc;
}
```
```
<button id="focusButton">A button</button>
```
:disabled
Applies styles to a button control when the control is disabled. To disable a button, add the disabled attribute to its HTML or set the disabled property to true in JavaScript.

This example disables a button and defines a style for it.
```
#disabledButton:disabled {
   border-style: dotted;
}
```
```
<button id="disabledButton" disabled>A button</button>
```

(For more info about the different ways you can combine pseudo-classes and other selectors, see Understanding CSS selectors.)

WinJS CSS classes

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.

Note To use this class, your page must contain a reference to one of the WinJS style sheets. For more info, see Windows Library for JavaScript style sheets.

This example uses the win-backbutton class to give a button the style of a navigation button.

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

Using the class makes a button look like this.

A button that uses the win-backbutton class

HTML essential controls sample

Quickstart: Adding a button

Guidelines and checklist for buttons