How to make a button link to another page in HTML
Overview
HTML can be used in the following ways to facilitate redirection to another page:
Method 1: Using JavaScript
The onclick attribute executes a script when the button is clicked. It can be used in conjunction with the <button> or <input> tags.
A sample output using the two different tags is shown below. In order to open the link in a new window, the window.open method is used.
HTML
<!DOCTYPE html>
<html>
<body>
<h3>Using the onclick attribute in the button tag</h3>
<button onclick="window.open('https://educative.io/');" target="_blank"> Click Me! </button>
<br> </br>
<h3>Using the onclick attribute in the input tag</h3>
<input type="button" value="Click Me!" onclick="window.open('https://educative.io/');" >
</body>
</html>
Using <button> and <input> tags to link to another page
Note: This method requires JavaScript to be enabled in your browser.
Method 2: Using the <form> tag
The action attribute in the <form> tag can be used to specify the URL to send the form data to upon submission.
<!DOCTYPE html>
<html>
<body>
<h3>Using the action attribute in the form tag</h3>
<form action="https://educative.io" target="_blank">
<button type="submit"> Click Me </button>
</form>
</body>
</html>
Using <form> tag and action attribute to link to another page
Alternatively, the formaction attribute can be used inside the <button> or <input> tags with type=“submit”.
Note: Since formaction is an HTML5 specific feature, it may not always work as expected on older versions of popular browsers like Chrome and Safari. In some cases, a trailing question mark(?) is added at the end of the URL by default.
<!DOCTYPE html>
<html>
<body>
<h3>Using the formaction attribute in the button tag</h3>
<form target="_blank">
<button type="submit" formaction="https://educative.io"> Click Me </button>
</form>
</body>
</html>
Using <form> tag and formaction attribute to link to another page
Method 3: Using the <a> tag
The href attribute can be used to add the link to a text and the <a> tag can then be stylized with CSS to look like a button as shown below:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #2c1aed;
border: none;
border-radius: 10px ;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-size: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Stylizing the anchor tag</h3>
<a href="https://educative.io" class="button" target="_blank"> Click Me</a>
</body>
Using <a> tag and CSS to link to another page
![Whatssap](<a aria-label="Chat on WhatsApp" href="https://wa.me/0657077689"> <img alt="Chat on WhatsApp" src="WhatsAppButtonGreenLarge.svg" /> <a />){kind=link}
123