Buttons: Call attention to important links

A button helps a critical call to action stand out from other content on the page.

« SEE ALL BEST PRACTICE GUIDES

Adding buttons requires you, the content editor, to carefully prioritize the action you want users to take on a given page. Use buttons sparingly – only for a website’s most important actions.

Here are a few guidelines for using buttons effectively:

  • Start with a verb, and call on visitors to take action (button = call to action)
  • Limit to three words, and preferably fewer (aim for 22 characters max.)
    Examples:  Apply  |  Schedule a visit  |  Register online
  • Include no more than one button per page
Screenshot: A red text box includes text to get started on a new website, with a button that states "Request a site."
On the homepage of this very website, the primary action for people to take is to request a website, which is exactly what the one button asks visitors to do. A secondary action — logging into an existing site — is offered as a text link below the button.

In some cases, you can use two or more buttons to indicate parallel calls to action for different audiences or tasks. When this is the case, use a secondary button style so your site visitors aren’t overwhelmed by competing calls to action. For example, button styles in the WashU Web Theme use red for the primary button color and white for the secondary button color.

With 12 buttons (!) this page for guides and tutorials is an extreme example of using multiple buttons. Only two buttons are red, and the remainder — all white — are organized in a consistent grid to keep the page from becoming overwhelming.