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.
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.
| Link | Button |
|---|---|
| created using an anchor tag | created using button tag |
| must have an absolute or relative path | generally don’t have any path or link |
| redirects to a different page or another part of the same page | generally submits user-generated info |
| used with and between text content (generally) | used with forms |
| it does not act like a button | it can also act as a link |
| the sole purpose is to redirect users | the main purpose is to follow a form action attribute |
| it can make images & other elements clickable links | It can’t |
| its cursor is set to “pointer” by default | the default value is “auto” |
| has “href, target” attributes | has “type” attribute |
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.
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.
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
- How to add a link in HTML?
- How to open a link in a new tab in HTML?
- How to create an HTML download link?
- What is the difference between a link & button?
- How to create an HTML button that works like a link?
- How to make a div clickable link?
- How to create HTML anchor links that jump to another section?
- How to create an HTML mailto link (including email subject)?
- How to center a link in HTML & CSS?
- How to deactivate links using CSS?
- How to remove the underline from a link?
- What is the difference between a link & button?
- How to create an HTML button that works like a link?
- How to style buttons with CSS
- How to center a button in CSS?
- How to create an image button?
- Button border examples
- Rounded buttons
- How to create back to top button in HTML, CSS & JavaScript
- How to create a close button?
- How to remove the button border?
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.
