Hi, i don’t have a specific problem but am interested in doing things correctly and relevant opinions.
I have been told that buttons should not be used for navigation, links should be used.
But a CTA button looks so much more impressive and professional.
A button draws more attention than a link.
A link can be styled as a button, is this acceptable or problematic. If a link is styled as a button, which css takes precedence (highest specificity), button styling or link styling?
Would it be acceptable to use a simple form element with no input fields so submission button goes to another page?
If I do style a link as a button what should I set ‘role’ to - button or link?
Interested in feedback thanks guys, to be a better coder and avoid future problems, thanks for your time.
It seems like you are over-thinking things. If what you want is a navigational link to another page, the correct element to use is an anchor tag (<a>). If you wish for that link to look like a button, that’s fine, apply CSS to it so it looks like you want.
It boils down to the same old concept of semantics and styling. Always choose the HTML element for its semantic meaning or purpose. Never choose an element based on how it looks, just because you want something that looks that way. That’s why we have CSS, so you can make any element look however you want it to look.
Thanks for advice.
So it’s ok to use an anchor tag but style it as a button? in that case what would you set role to and which css would persevere, link css or button css? I am thinking of attributes for active, hover etc. I believe, if I am correct a button does not have a visited attribute.
I’m not sure an anchor needs a role, unless it’s doing something special or unusual. That’s something that goes hand-in-hand with using (the correct) semantic elements, it’s doing what it’s expected to do, that way ATs and search bots don’t get confused by them.
When you start using the wrong elements (for nav), then navigation can get confusing, particularly for vistors who use ATs, it can also disrupt the work of the search engine crawler bots which may have negative effects on SEO.
An anchor doesn’t need a role its a semantic element that navigates to a destination. If you are navigating to a destination then thats what an anchor was designed for. It can look like anything you want from a button to a balloon to text only. It’s an anchor just the same.
There is no need for a visited state on a button because it is not an anchor. Its primary purpose is to create an action. Buttons are for actions and links are for destinations.
A button or a link can visually look like each other but all you need to remember is that if you are going to a destination (such as in a menu) then you use an anchor. If on the other hand the element triggers a modal or some other action, or posts a form etc. then its a button
Is it acceptable? It can be.
Is it problematic? It can be.
If i’ve got a ‘link’ that looks like a button that says “Push me”, i’m creating a false impression that the button is going to do something. If pushing the button moves the user to another page, i’ve potentially made the user feel duped into going somewhere they didnt intend to. Not a great impression to give my user.
If the “Push me” was a link, it’s pretty clear to the user that clicking on it’s going to send them somewhere. It’s not particularly clear where, so i would expect such a link to have less clicks, as people have become more suspicious of random links without clear indicators, but that’s another issue.
TLDR; with great HTML-editing-power comes great responsibility. Or; don’t be so preoccupied with whether they could, they didn’t stop to think if they should.
Good points. Any time I use a button it is pretty obvious if it will take you ‘somewhere else’ and I genuinely believe that in the context I use them, which is never to dupe, they actually give a better impression and are easier to locate than some links. Obviously they are used very sparingly and only when I want to draw attention to a link so they can find it more easily if they wish to use it.
My worry was more about the technical aspect, but I had not considered it from a user experience perspective. I will do that now and when I do use them I will do so sparingly and responsibly.
