If a link looks like a button, should it still be styled as a button?

Links (<a> tag) are used to navigate to another page or resource. Buttons (<button> tag) perform actions on the current page, such as submitting a form or calling a JavaScript function.

If an element performs an action but looks like a link, it should be styled as <button>. Conversely, if an element leads to another page but looks like a button, it is better to use <a>.

Accessibility considerations:

• Semantics: Screen readers and other assistive technologies use the semantics of tags to understand the purpose of an element. A button is perceived as an interactive element that can be activated, while a link is perceived as navigation.
• Keyboard interaction: By default, buttons are activated with the Enter or Space keys, links with only Enter. Keyboard users expect this behavior.
• Styling and JavaScript: Using the correct tags simplifies styling and event handling.

Example of styling a link as a button:

<a href="/page" class="button">Go to page</a>

Example of styling a button to mimic a link (rare, but possible for specific UX solutions):

<button type="button" onclick="doSomething()" class="link">Perform action</button>

In general, adhere to semantics: use links for navigation, buttons for actions.