HTML Button Link: How to Navigate to Another Page

For normal page navigation, use an HTML <a href> link and style it like a button. A real <button> is intended for actions such as submitting a form, opening a dialog or running JavaScript.

<a href="../" class="btn btn-primary">Visit Home Page</a>

This gives users normal link behavior such as opening the destination in a new tab from the browser context menu, while still allowing the link to look like a button.

Older pages often use an onclick handler on an input or button to change location.href. That still works, but JavaScript is not needed when the user's intent is simply to follow a URL.

Video tutorial on text links in Part I

Recommended: Style an Anchor as a Button Top ↑

If clicking the control should take the user to another URL, an anchor is the semantic HTML element for the job. You can style it with your own CSS or with Bootstrap classes.

<a href="https://www.plus2net.com/" class="btn btn-primary">Visit plus2net</a>

Visit plus2net

This keeps a real URL in the href attribute, which is better for link semantics, keyboard/browser behavior and crawlable navigation than requiring JavaScript for a simple page change.

Button Navigation with JavaScript Top ↑

If you specifically need a button because clicking it performs application logic, JavaScript can change the current page with window.location.href.

<button type="button" onclick="window.location.href='../'">Visit Home Page</button>

Older examples may use parent.location. That targets the parent browsing context and is mainly relevant when a page is inside a frame. For ordinary top-level navigation, window.location.href or simply an anchor link is clearer.

Legacy input-button form Top ↑

An <input type="button"> can also run JavaScript, but <button type="button"> is generally easier to read and can contain richer content.

<input type="button" onclick="window.location.href='../'" value="Visit Home Page">

Do Not Nest a Button Inside a Link Top ↑

The legacy pattern below should not be used:

<!-- Avoid: nested interactive controls -->
<a href="../"><input type="button" value="HOME"></a>

An anchor that has an href is already interactive content. Do not place another interactive control such as <input type="button"> or <button> inside it. Style the anchor itself instead.

The older article on search engine friendly page design remains available for related background.

Open a Link in a New Tab Top ↑

Use target="_blank" when there is a genuine reason to open another browsing context. Tell users when a link opens a new tab because unexpected context changes can be confusing.

<a href="https://www.plus2net.com/" target="_blank" rel="noopener">
  Visit plus2net (opens in a new tab)
</a>

Visit plus2net (opens in a new tab)

Use an Image as a Link Top ↑

An image can be placed inside an anchor when the image itself is the link. Give the image useful alternative text that describes the link's purpose.

<a href="../">
  <img src="../images/top2.jpg" alt="Go to plus2net home page">
</a>

Confirm Before Navigation Top ↑

If navigation depends on a user decision, JavaScript can confirm the action first. A normal link is still preferable when no confirmation or other application logic is required.

<button type="button" onclick="confirmRedirect()">Go to plus2net.com</button>

<script>
function confirmRedirect() {
    if (confirm("Do you want to visit the page?")) {
        window.location.href = "https://www.plus2net.com/";
    }
}
</script>

Child Windows and window.open() Top ↑

The original tutorial includes a useful demonstration of opening a child window and communicating with its opener. This is a specialized JavaScript use case, not the recommended method for ordinary hyperlinks.

Read more on child window control in the JavaScript section.

<button type="button" onclick="window.open('button-child.php','demo','width=550,height=300,left=150,top=200,toolbar=0,status=0')">
  Open child Window
</button>

The preserved child-window demo uses window.opener to control the page that opened it. Modern browser security rules restrict opener access across origins, and popup blocking can prevent windows that are not opened directly from a user action.

Original child-window actions Top ↑

The following patterns illustrate the original same-origin opener concept:

<button type="button" onclick="opener.location='https://www.plus2net.com/'">Change the opener page</button>

<button type="button" onclick="location='https://www.plus2net.com/'">Change this window</button>

<button type="button" onclick="self.close()">Close this window</button>

CSS and Bootstrap Button Styles Top ↑

Button-like links and real buttons can both be styled with CSS. Keep their semantics based on what they do, then apply the visual style separately.

DEMO of Buttons with CSS properties →

Using Bootstrap styles Top ↑

Bootstrap button classes can style either anchors or buttons. These are real buttons because the controls below are demonstrations rather than navigation links.

Primary Secondary Success Info Warning Danger Link-style button

Read more about Bootstrap buttons in the jQuery section

Accessibility and Usability Top ↑

• Use links for navigation and buttons for actions so assistive technologies announce the correct control type.
• Write descriptive link/button text. Avoid vague labels such as “click here” when a clearer destination or action is possible.
• Do not remove the visible keyboard focus indicator unless you replace it with an equally clear focus style.
• If a link opens a new tab, communicate that behavior in the link text or nearby accessible text.
• For image links, write alt text that communicates the destination or purpose of the link.
• Inside forms, specify type="button" for buttons that should not submit the form.

Common Button-Link Mistakes Top ↑

Using JavaScript for every link Top ↑

If the user is simply going to another URL, use an anchor with href. JavaScript adds unnecessary dependency for basic navigation.

Nesting interactive controls Top ↑

Do not put a button or <input type="button"> inside an anchor. Style the anchor itself.

Using target="new" as if it means a new tab every time Top ↑

new is only a browsing-context name. Use target="_blank" for the standard new-context behavior.

Forgetting a button type inside a form Top ↑

A <button> associated with a form can submit it by default. Use type="button" when submission is not intended.

Opening new tabs unexpectedly Top ↑

Opening a new tab changes the user's browsing context. Use it intentionally and make the behavior clear.

Related Tutorials Top ↑

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: