How to create an HTML button that acts like a link? There are multiple methods of making an HTML button, that behaves like a connection (i.e., tapping on it the client is diverted to the predetermined URL). You can pick one of the accompanying strategies to add a connection to the HTML button.
Once in a while, you might need to utilize a button to connect to another page or site rather than to present a structure or something to that effect. This is genuinely easy to do and can be accomplished in more ways than one.
Once in a while, we want to make an HTML button, that behaves like a connection (i.e., tapping on it the client is diverted to the predefined URL).
There are a few techniques, we will introduce 3 of them. Pick one of the accompanying techniques to add a connection to an HTML button. There are a few strategies to make an HTML button that goes about as a connection. Some of them are talked about underneath:
Note: Adding fundamental CSS property to the button in each strategy to make the button looks better.
Table of Contents
1. Add inline onclick event
a) To HTML <button> tag within HTML <form> element.
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button onclick="window.location.href = 'https://w3docs.com';">Click Here</button>
</body>
</html>
Try it yourself
It might not work if the button is inside a <form> tag.
b) To <input> tag within HTML <form> element.
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<input type="button" onclick="window.location.href = 'https://www.w3docs.com';" value="w3docs"/>
</form>
</body>
</html>
Try it yourself
The links won’t work when JavaScript is disabled, and search engines may ignore such kind of links.
Using onclick Event: The onclick event attribute works when the user click on the button. When mouse clicked on the button then the button acts like a link and redirect page into the given location.
<!DOCTYPE html><html><head> <title> Create an HTML button that acts like a link </title> <!-- Style to create button --> <style> .GFG { background-color: white; border: 2px solid black; color: green; padding: 5px 10px; text-align: center; display: inline-block; font-size: 20px; margin: 10px 30px; cursor: pointer; } </style></head> <body> <h1>GeeksforGeeks</h1> <!-- Adding link to the button on the onclick event --> <button class="GFG" onclick="window.location.href = '';"> Click Here </button></body> </html> |
Using button tag inside <a> tag: This method create a button inside anchor tag. The anchor tag redirect the web page into the given location.
<!DOCTYPE html><html> <head> <title> Create an HTML button that acts like a link </title> <!-- Style to create button --> <style> .GFG { background-color: white; border: 2px solid black; color: green; padding: 5px 10px; text-align: center; display: inline-block; font-size: 20px; margin: 10px 30px; cursor: pointer; } </style></head> <body> <h1>GeeksforGeeks</h1> <!-- Adding button inside the link tag --> <a href=''> <button class="GFG"> Click Here </button> </a></body> </html> |
Adding styles as button to a link: This method create a simple anchor tag link and then apply some CSS property to makes it like a button.
<!DOCTYPE html><html> <head> <title> Create an HTML button that acts like a link </title> <!-- Style to create button --> <style> .GFG { background-color: white; border: 2px solid black; color: green; padding: 5px 10px; text-align: center; display: inline-block; font-size: 20px; margin: 10px 30px; cursor: pointer; text-decoration:none; } </style></head> <body> <h1>GeeksforGeeks</h1> <!-- Create a normal link and add CSS property --> <a href="" class="GFG"> Click here </a></body> </html> |
Using form tags: This method uses form tag and button tag. When button is clicked then the form action attribute is called and web page redirect into the given location.
<!DOCTYPE html><html> <head> <title> Create an HTML button that acts like a link </title> <!-- Style to create button --> <style> .gfg { background-color: white; border: 2px solid black; color: green; padding: 5px 10px; text-align: center; display: inline-block; font-size: 20px; margin: 10px 30px; cursor: pointer; } </style></head> <body> <h1>GeeksforGeeks</h1> <!-- Create a form then add button inside the form --> <form action=""> <button class = "gfg" type="submit"> Click Here </button> </form></body> </html> |
Note: The output will be same for every method.
Output:
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Also Read: How to Enable and Disable Macros in Excel?