I'm currently adding a notice to our application flow that is disclosed by user action. The idea is that this notice is specific to certain situations in our flow, and not applicable in any case (that's why its shown on-click).

Currently I'm using a <button> element for that, which is styled as a link: no borders, background-color and underlined text. This is consistent with the rest of the application (which was build by my predecessor). A sample of how this looks can be seen in my Codepen here.

But I'm wondering if this is at all correct? I'm actually using the visual styles of a hyperlink for an element with the action of a button. Even in our application, hyperlinks are used (for instance to link to a PDF document that is opened in a new tab), so this can lead to potentially confusing ux.

On the other hand, as indicated by this question about checkbox label styling, you can make the argument that the element is clickable, which would support this form of styling.

Is this a correct way to go, or is it documented to be a confusing ux element?

  • In the question about checkbox label styling, almost every answer said that the checkbox labels should not be made to look clickable as it is standard that they do not look like links. Not that this means what you're doing is wrong, just that the linked question doesn't support your argument. – icc97 Aug 15 '17 at 0:27

Users don’t care about the underlying implementation. They don’t care if the element is a link, button, or gerbil. It could load hypertext, run a script, or dispatch a small rodent down a tube. They don’t care. All they know and care about is what they see. If it looks like a link they’ll expect it to look like it acts as a link. If it looks like a button, they expect it look like it acts as a button.

Thus, I don’t see a problem with a button style like a link as long as it acts like a link. That means more than just being clickable. That means it navigates, or at least loads content in some way. For the purpose of showing a notice, I think your design is okay.

The same applies the other way. If a link does an action on the underlying data (e.g., removes an item from a shopping cart), then it should be styled to look like a button. Use an image if you have to.

| improve this answer | |
  • 2
    This is true for the majority of users, yes. But you need to be careful about utilising elements in unexpected ways when it comes to screenreader users and other users with accessibility requirements. For buttons acting like links, this isn't a huge accessibility issue. It's pretty common behaviour for these two elements to be switch and changed, but it might make a different if you're reappropriating other html elements for visual-only reasons. – JonW Aug 9 '17 at 12:32
  • Very clarifying, thank you both! This application will be used by a broad audience, so it's important to make sure it will not hamper them in completing our app flow. – Lodybo Aug 9 '17 at 13:09
  • If you have the javascript to dispatch a small rodent down a tube, please post on stack overflow :) – Mike M Aug 9 '17 at 13:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.