Buttons are a visually focused mechanism for taking action. To be most effective, they must be easily discovered and their intent immediately understood. They require a visual treatment that sets them apart from other non-actionable content on the screen, through shape, color and placement. Labels must be clear, simple, and descriptive.
There are two main categories of buttons: action and navigation. They have different visual treatments because they have different intents. Action buttons are for interacting with the site and the data within. Navigation buttons are for going to a new location within the site.
Button labels are sentence case. The labels should be descriptive enough to be clear, but not so wordy that the button becomes jarringly large.
More information on buttons can be found in the Bootstrap documentation.
Button Types
Button styles apply to both the button and a elements.
<button class="btn btn-default">Primary button</button>
Use the default button style when button does not represent the primary action on the page.
<button class="btn btn-primary">Primary button</button>
Use the primary button style when needing to call attention to that action, i.e. you want the customer to click on this. Primary buttons should only be used once per page.
<button class="btn btn-link">Secondary button</button>
The secondary button style is used for buttons whose action needs to be deemphasized (e.g., the cancel button on a form).
Formatting
Button labels are sentence case.
Correct Only first word is capitalized.
Incorrect All major words are capitalized.
Text
The labels should be descriptive enough to be clear, but not so wordy that the button becomes jarringly large. Aim for a maximum of 3 words.
Correct Button's intent is clear without relying on context.
Incorrect Button labels are too vague.
Incorrect Button label is verbose.