When to Use a Button or Link

by on 08/09/10 at 2:41 pm

The button and link have co-existed on websites for a long time. But most designers don’t know when to use one over the other. The question to ask yourself when you’re not sure is, “Will this action affect the website?”

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 on the most important actions and links for less important ones. Too many buttons can make your website load slow and key call-to-actions hard to find.

When to Use a Button or Link

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:

  1. Actions where users affect the website’s back-end or front-end
  2. 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 basically 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.


When to Use a Button or Link When to Use a Button or Link

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

10 Responses to “When to Use a Button or Link”

  1. Pritam Pebam

    Aug 11th, 2010

    I think Users trust buttons more than links…
    and can you please elaborate what you mean by “but tons can come in dif fer ent sizes, col ors and styles”??? Why can’t we just style the links to look like a button??

    • anthony

      Aug 12th, 2010

      What I mean by that is that buttons give you more flexibility in how you style them. You can choose your own color, gradient, size, font, shape and placement for it because a button is essentially an image that stands on its own.

      Links compete with text so they require a level of standardization and consistency in order to communicate that it’s an affordance. Because of this you lose flexibility in how you style your links. If you wanted to make your links look like buttons by putting parenthesis around them that doesn’t seem like a problem if the link navigates you to specific content, but buttons should definitely be used for actions of commitment.

  2. Hemanshu

    Aug 12th, 2010

    Yeah, I completely agree here.. buttons for actions and links for navigation :)

  3. J. Albert Bowden II

    Sep 2nd, 2010

    sorry, but can you define button and link in this context, i’m not sure if you are talking about anchor elements as links, button elements for buttons and/or input elements with an attribute of button.

  4. Travis

    Sep 9th, 2010

    I try to limit the use of buttons for things that are actually committing an action. Examples: logging in, submitting a form, posting a comment, etc. I use links for things that trigger other actions. Examples: showing a form to post a comment (wherein a button is there to commit the comment). Whatever you choose to do, I think there should be a differentiation and consistency in how you use links vs buttons so users get used to the difference (whether they notice it or not).

  5. Erica DeWolf

    Oct 18th, 2010

    Great post! I think the question also becomes what the goal of your page is. If it’s a landing page, and you want somebody to perform a call to action- then a button should be used, as it has been proved more effective in this situation.

    Thanks for the info!

  6. Aaron

    Feb 9th, 2011

    Nice.
    Here I leave you an old but still good article about links and buttons from Jakob Nielsen’s web.

    http://www.useit.com/alertbox/command-links.html

  7. BURKE

    Jun 7th, 2011

    This is a great discussion, and one that most designers don’t understand. The idea of when to use a link or a button. The Jakob Neilsen article is a great one! However, moving forward, it fails to describe what happen when there are several call-to-actions on a page, or more specifically within a content grouping.

    For example, log in components that ask users to “submit” or “forgot password?” Forms that allow users to “submit” or “clear”. It’s important to understand primary vs. secondary, or even tertiary actions.

    Rule of thumb.. Your primary action gets the button, while secondary and tertiary actions need to default to a link representation. This way the primary action receives the most visual weight, or prominence, thus encouraging users to take that action over the others. Hope this helps everyone.

  8. Arvind

    Nov 28th, 2011

    Great article, I have been troubled by this for a while. However I still dont know how to put this into a UI guideline document?

    Edit, is a link or a button? Remove? Add?

  9. John

    Jul 30th, 2014

    I think a simpler definition is to use a link for navigation and a button for an action. A link just navigates you to some other content. An action is what you said about signing up or posting a comment.

Leave a Comment