DEV Community

loading...

Discussion on: How to create an HTML button that acts like a link?

Collapse
adam_cyclones profile image
Adam Crockett

Do you know that this is bad practice? In the world of accessibility, a button that acts like a link is going to be read out as a button to screen reader users and so the expectation of navigation is completely absent. Therefore it's better to have a link act like a link and a button act like a button.

The title says button that acts like a link but the code says style a link like a button?

Collapse
courseprobe profile image
Course Probe Author

What do you think about Example 2 ? Would you have suggestions for a different approach ?

Collapse
adam_cyclones profile image
Adam Crockett

Okay so theres a few issues with Example 2.

The form action attribute as I have read it in HTML5 spec (this is not a common attribute 🦄), This is designed to give a <form> the ability to POST to several different urls - an unusual case but anyway such is the way of the web. A button hacked into a link in this way will not be counted towards SEO is another reason not to use this method.

The solution to navigation is the idiomatic <a href=""/> anchor and thats it really. There is then no need to have a style to make a button look like a link.

If you can give me a use case I can try illustrate it more clearly.

Thread Thread
link2twenty profile image
Andrew Bone

These are probably the best ways to use a button as an anchor with the former being best.

Thread Thread
adam_cyclones profile image
Adam Crockett

Sorry my friend it's not valid HTML5 according to the HTML5 Spec Document from W3C:

html.spec.whatwg.org/multipage/tex...

Still works I guess

Collapse
hxii profile image
Paul (hxii) Glushak

This. Links should stay links, and buttons should stay buttons.

Collapse
ricobrase profile image
Rico Brase

This.

Use a button for actions (save, delete, edit, etc. with corresponding navigation INSIDE of your own application, e.g. navigate to the edit page), but use <a href="https://example.com">Link text</a> for any sort of proper navigation, e.g. external links or internal links to separate parts of your app (user management, article management, etc.).

If you want to, you can style some links with <a href="https://example.com" class="button">I'm a button!</a> and some CSS for the .button rule.

Don't change the intended behaviour of elements to make them fit - change their look!