Buttons are used to communicate and initialize actions when the user clicks them. Make sure that the label and states are clear to the user.
Use links, rather than buttons, to redirect users to another page of the current website or app, or to another website.
Avoid using too many buttons on a page. If you have a lot of buttons, less popular or less important actions may be grouped in a “more” button (dropdown list) or visually styled as isolated actions or links.
The button label should allow to foresee what will happen when clicking it.
Button labels should be short and use “trigger words”.
Avoid using the terms OK, Yes and No to dismiss a Dialog Modal.
Whenever possible, the first word of the label should be an action verb (e.g., the label for a button that allows the user to add a notification should be “ADD NOTIFICATION”).
When a button includes only an icon (no label), the label should be added in the alternative text element in the HTML and appear in a tooltip when the cursor is above the button.
An icon with a label does not need alternative text. In this case, the icon is a visual help to identify the purpose faster and alternative text would be redundant (causing a screen reader to repeat the text).
Base style for all buttons and links with the "btn" class.