Buttons are actions that do something, not go somewhere.
If uncertain whether to use a button or a link, in most cases use a link. CSS Tricks has a few tips about buttons:
Begin with an active verb. Avoid the default verb “Submit”, and apply a relevant verb instead (e.g. when applying or registering for a library card, “Apply” or “Register” are the correct verbs for the action).
Keep button text to 1 to 3 words, as few as necessary to provide clarity to the person what the action will be engaged when used. Refer to the links and buttons content guidelines for examples.
Standard web forms use the default button size.
Left-align buttons for improved findability for people who increase the screen size. Position the primary button first and any secondary action after it (to the right).
Buttons default to the primary color, currently set as maroon. Primary actions use the primary color.
If a form or interactive has secondary actions, use the secondary color, currently set as gold, by using the btn-secondary class.
If the button set includes a “cancel” option (never use this on a form), set it as btn-exit, which sets it to a gray.
Do not use “Clear” or “Reset” buttons on forms, people can navigate away from a form if they desire to abandon it whereas their presence could cause negative experiences (by accidentally losing all their form data).
<button type="button">Request appointment</button>
<button type="submit">Send</button>
In the case where two actions are presented.
<button type="button" class="btn-secondary">Edit request</button>
Exit buttons refer to a tertiary “undo” type action for a specific task, such as canceling a book request in a “manage request” form.
<button type="button" class="btn-exit">Cancel request</button>
These buttons may be used in places where the action is de-emphasized or less important than the nearby content, where having the bright colors attract away from the necessary text.
<button type="button" class="btn-ghost">Contact</button>