The simplest way: use a button inside an anchor tag
The most straightforward approach is to wrap a <button> element inside an <a> (anchor) tag. This lets you style the button however you want while keeping the link behavior that browsers expect — the URL shows in the status bar, you can right-click to open in a new tab, and keyboard navigation works normally.
Here's the basic structure:
<a href="https://example.com"> <button>Click Me</button> </a>
The button appears and behaves like a button visually, but the link underneath handles all the navigation. This approach works in all modern browsers and requires no JavaScript.
Key Takeaways
- Wrapping a button inside an anchor tag is the simplest method and requires no JavaScript or extra code.
- Using a button with an onclick handler and JavaScript is more flexible if you need to run code before navigating or redirect based on conditions.
- The CSS approach of styling an anchor tag to look like a button preserves link semantics without nesting elements.
- Always include a real href attribute so keyboard users and assistive technology can navigate properly.
- Test your button links with keyboard navigation (Tab key) and right-click context menus to ensure they work like real links.
Using JavaScript with a button element
If you need to run code before navigating — checking form validation, logging user actions, or deciding which URL to go to — use a <button> with an onclick handler that calls JavaScript. This gives you control over what happens when the user clicks.
Here's a basic example:
<button onclick="window.location.href='https://example.com'"> Go to Example </button>
You can also write a function that does more work before navigating:
<button onclick="handleClick()">Submit and Continue</button> <script> function handleClick() { // Validate form or run other code if (formIsValid) { window.location.href = 'https://example.com'; } } </script>
The downside: users cannot right-click to open in a new tab, and the URL does not appear in the status bar. Keyboard users may also have trouble if you do not handle the Enter key properly. Use this method only when you genuinely need to run code before navigating.
Styling an anchor tag to look like a button
Another option is to keep the semantic link structure and use CSS to make the anchor tag look and feel like a button. This preserves all link behavior while giving you full control over appearance.
<a href="https://example.com" class="button-link">Click Me</a> <style> .button-link { display: inline-block; padding: 10px 20px; background-color: #007bff; color: white; text-decoration: none; border-radius: 4px; border: none; cursor: pointer; font-size: 16px; } .button-link:hover { background-color: #0056b3; } </style>
This approach keeps the link semantic (screen readers announce it as a link, not a button) and preserves all native link behavior. It works well when you want button styling but do not need button functionality.
Handling keyboard navigation and accessibility
Whatever method you choose, make sure keyboard users can interact with your button link. Test by pressing the Tab key to navigate to the element, then press Enter to activate it. The element should respond the same way a mouse click would.
If you use the JavaScript onclick approach, add a onkeypress handler to catch the Enter key, or use an event listener instead of inline onclick:
<button id="myButton">Go Somewhere</button> <script> document.getElementById('myButton').addEventListener('click', function() { window.location.href = 'https://example.com'; }); </script>
Event listeners handle keyboard activation automatically, so you do not have to write separate handlers. Always test with a keyboard to confirm the button responds to both mouse and Enter key presses.
Avoiding common mistakes
Do not nest interactive elements inside each other — for example, a button inside a button or a link inside a link. Browsers do not allow this, and it breaks keyboard navigation and screen reader behavior.
If you use the anchor-wrapping-button approach, remove the default button styling that makes it look like a form button. Add border: none; background: none; padding: 0; to the button CSS so it does not have a double border or conflicting styles.
Always include a real href attribute on anchor tags, even if you plan to use JavaScript. This ensures the link works for users with JavaScript disabled and gives assistive technology the destination URL.
Comparing the three approaches
| Method | Best For | Keyboard Support | Right-Click Menu |
|---|---|---|---|
| Button inside anchor | Simple button-styled links | Yes, automatic | Yes |
| Button with onclick JavaScript | Running code before navigation | Requires extra handling | No |
| Styled anchor tag | Button look with link semantics | Yes, automatic | Yes |
Frequently Asked Questions
Can I put a button inside a form and have it navigate to a URL?
Yes. Set the button type to button (not submit) and add an onclick handler: <button type="button" onclick="window.location.href='url'">. This prevents the form from submitting while still letting the button navigate.
Why does my button link not work on mobile?
Test whether the issue is touch-specific. Some mobile browsers handle onclick differently than desktop. Use event listeners instead of inline onclick, and make sure the button has enough padding (at least 44 pixels) so it is easy to tap. Wrapping a button in an anchor tag usually works better on mobile.
Should I use a button or a link for navigation?
Use a link (anchor tag) if the action navigates to a new page or URL. Use a button if the action triggers something on the current page — submitting a form, opening a modal, toggling content. If you need button styling on a link, style the anchor tag with CSS instead of nesting elements.
How do I make a button link open in a new tab?
If you are using an anchor tag, add target="_blank": <a href="url" target="_blank">. If you are using JavaScript, add window.open('url') instead of window.location.href. The anchor-wrapping-button method also supports target="_blank" automatically.