How to Link a Button to Another Page in HTML?

Last Updated : 17 Nov, 2024

Linking a button to another page is a common requirement in web development. It can allow the users to navigate between a website's different sections or pages. This can be done using the various HTML elements.

Prerequisites

1. Using <a> Tag Styled as Button

The <a> tag is traditionally used to create hyperlinks to navigate from one web page to another. By default, <a> tags can be displayed as clickable text links. However, by applying the CSS styles, we can make the <a> tag look and behave like a button.

Syntax

<a href="destination.html" class="button-class">Click Me</a>

HTML

<!--index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
	<title>Styled Link as Button</title>
	<style>
		.button-class {
			background-color: #4CAF50;
			/* Green */
			border: none;
			color: white;
			padding: 10px 20px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 4px 2px;
			cursor: pointer;
			border-radius: 4px;
		}
	</style>
</head>

<body>
	<a href="another-page.html" class="button-class">
      Go to Another Page</a>
</body>

</html>

HTML

<!-- another-page-->
<!DOCTYPE html>
<html>
<head>
    <title>Basic Another Example</title>
</head>
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>Basic Another Page Example</h2>
</body>
</html>

Output

2. Using <button> Tag with an onClick Event

The button element can be used to define the clickable button. By using the onClick attribute, we can specify the JavaScript code that will execute when the button is clicked. This method can directly change the windoe.location.href property to navigate to the another page.

Syntax

<button onclick="location.href='destination.html'">Click Me</button>

HTML

<!--index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
	<title>Button with OnClick Event</title>
</head>

<body>
	<button onclick="location.href='another-page.html'">
        Go to Another Page
    </button>
</body>

</html>

Output

3. Using JavaScript to Handle Button Click Events

Using the JavaScript to handle the click events can provides the greater control and flexibility. We can perform additional action before navigating to the another page, such as the validating data, displaying confirmation dialogs, or performing the asynchronous operations. This method can involves the assigning the onClick event handler directly via JavaScript.

Syntax

<button id="myButton" > Click Me </button>
<script>
document.getElementById("myButton").onclick = function () {
    window.location.href = "destination.html";
};
</script>

HTML

<!--index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
    <title>JavaScript Event Listener Example</title>
</head>

<body>
    <button id="navigateButton">Go to Another Page</button>
    <script>
        document.getElementById("navigateButton").onclick = function () {
            window.location.href = "another-page.html";
        };
    </script>
</body>
  
<html>

Output

4. Using Form with a Submit Button

Form can be used to collect the user input and submit it to the server. We can use the form with a submit button to navigate to the another page. This approach can be particularly useful when you need to pass the form data to the another page or backend service for the processing.

Syntax

<form action="destination.html">
    <input type="submit" value="Click Me">
</form>

HTML

<!---index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Form Submit Example</title>
</head>

<body>
    <form action="another-page.html">
        <input type="submit" value="Go to Another Page">
    </form>
</body>

</html>