Picchu

Buttons

Guidance

Buttons let users initiate an action.

In the case of websites, buttons naturally lend a higher prioritization to actions than text links, so it is best to reserve the use of buttons for the main objectives of the page, while using text links for actions that are of lesser importance.

Button sizes (both height and width) are dictated by the font size and length of the label within it, as shown in the code demo section that follows.

Button color may be customized to any Microsoft brand color. Hover states should be darker by 20% using the brand color palette increments. Pressed states should likewise be darker than the hover state by 20%.

Button labels

  • Label buttons as a verb (or begin with a verb if more than one word must be used).
  • Ensure the button label clearly and concisely indicates what will happen upon click.
  • Use sentence case.

Demo

See the Pen Button demo 1 by Microsoft.com (@microsoft) on CodePen.

Resources