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 when used. Refer to the links and buttons content guidelines for examples.
Standard web forms use the default button size.
Left-align buttons to improve findability for people who increase the screen size or use a zoom tool. Position the primary button first and any secondary action after it (to the right).
Buttons default to the primary color (e.g. maroon on lib.umn.edu). Primary actions use the primary color.
If a form or interactive has secondary actions, use the secondary color (e.g. gold on lib.umn.edu) 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, a gray to de-emphasize it.
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>