Link vs button

In HTML, you create a link using the anchor (<a>) tag. And you create a button using the <button> tag. There are some similarities between links & buttons, and that’s why it’s confusing to some of us.

Also, there is some difference between these two. Otherwise, there is no reason to create these two separate HTML tags. And as a web designer, you should know the difference. So you can use the right tag at the right time.

Links vs buttons

I will discuss the difference between these two in detail. And some of them are opinionated. For now, see the key difference between a link & button in the table below.

LinkButton
created using an anchor tagcreated using button tag
must have an absolute or relative pathgenerally don’t have any path or link
redirects to a different page or another part of the same pagegenerally submits user-generated info
used with and between text content (generally)used with forms
it does not act like a buttonit can also act as a link
the sole purpose is to redirect usersthe main purpose is to follow a form action attribute
it can make images & other elements clickable linksIt can’t
its cursor is set to “pointer” by defaultthe default value is “auto”
has “href, target” attributeshas “type” attribute
Difference between a link (anchor) & button tag

Can a button be a link?

Yes, of course, a button can act like a link. However, it’s not a good practice to use buttons where the anchor tag is appropriate.

In many cases, I found that people are using buttons for styling purposes. Especially, who are using CSS frameworks.

But you can make a link’s (<a>) style just like a button. Only a few lines of CSS can change the appearance of a link that will look like a button.

So the gist is, a button can be a link. But do not make the button a link just for the sake of styling. Instead, use the anchor tag when it’s appropriate.

Are buttons clickable?

As I mentioned in the above table, its default cursor property is set to “auto.” So buttons are not clickable by default until you make them.

So if users need to click a button or interact with it, make sure to change its CSS cursor property to “pointer.” This will create a good user experience. You can learn more about it on the w3schools website.

You can make buttons clickable links. There are a couple of options to do that. If you want to learn more about it, see this post.

Should canceling option be a button or a link?

Generally, a canceling option should be a button because it’s a form action. You will see this type of use case of buttons in many places.

For example, while ordering products, applying for a position, making payments, etc. If you decide to not complete the process and want to cancel it, you will find a button to do it. If you inspect the button (inspect element), you will see that that was a button tag instead of an anchor tag (mostly).

However, it’s not mandatory to use hyperlinks for a cancel option. Though buttons are generally used to serve this purpose. But you can use links where it makes sense.

Learn more about HTML links

Learn more about buttons

Conclusion

Now you know the main difference between a link & button, and the best use cases for them. This will give you a good understanding of these two elements and help you to decide where to use which exact tag.