Button - use when the user is taking an action (that affects the website’s front or back end), for example, signing up to a newsletter. VERB.
Link - use to connect the user to a resource, for example, linking to another page or file. NOUN.
Other important points to note:
Links compete with text so they require a level of standardisation and consistency in order to communicate that it’s an affordance.
When you have multiple CTAs, typically the primary CTA will be a button with secondary and tertiary either taking secondary and tertiary button styles or becoming links, in order to de-emphasise the actions.
It’s important to understand the distinction between applications and websites. By definition of an application, its features affect something external to its own user interface, where as websites are conceptually static. Therefore the use of links and buttons in these would be different. This is now becoming increasingly important with the amount of ‘apps’ on mobile devices.
One clear rule we do have: don’t use buttons for navigation!
We should be designing so that we are semantically correct and this applies to our code too. Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define it’s presentation or look. This makes content explicit, which gives you a better browser compatibility, accessibility and SEO.
In addition, it’s important in our every increasing world of devices for the content to transcend the device. For this reason we need our content to be correctly marked up, independent of presentation and looks and so it’s increasingly important for us to be using the correct elements in our HTML.
In fact, the HTML elements available to us are anchors (these are our links), inputs and buttons (to us UX-ers this are both buttons).
Overall, it’s important for us to follow these rules of thumb, but to use what works best for the situation we are designing for.
