The button and link have co-existed on websites for a long time. But the problem most designers have is knowing when to use which. The question to ask yourself when you’re not sure is, “Will this action affect the website?” Your answer will indicate whether you should use a button or link.
Links usually outnumber buttons on a website. This is because buttons are images that take time and effort to create. All that’s needed to create a link is the HTML code. As a general rule, use buttons sparingly and on the most important actions and links for less important actions. Too many buttons can make your website load slow and key call-to-actions hard to find.
However, to know when to use one or the other in a specific situation, you must understand that every action on a site falls under two different categories:
- Actions where users affect the website’s back-end or front-end
- Actions where users won’t affect the website at all
Actions where users affect the website itself is where you use a button. For example, sign-up and purchase actions are often buttons. The user in these situations are creating a new account and completing a monetary transaction, which are actions that affect the website’s back-end. Creating new posts or making comments are actions that change a website’s content and what the user sees. These actions affect the website’s front-end. Whenever there’s a change in the website’s back or front-end is when you use a button.
Actions where users won’t affect the website are where you use a link. These are actions that take users from one page to another without changing anything on the website’s back or front-end. The user is a spectator browsing through content. They aren’t doing any actions that require more effort than clicking and viewing. The back-end and front-end of the website remains the same. It’s these situations when you should use a link over a button.
Most designers know to use buttons on key call-to-actions, but not many of them know why. After you ask yourself, “Will this action affect the website?”, you’ll know whether to use a button or link and why it makes the most sense.