How to add link to HTML button?
Last Updated :
21 Mar, 2024
Adding links to HTML buttons is essential for creating interactive web interfaces. In this article, we’ll explore various methods, including inline events, form attributes, and CSS styling, along with practical examples and code snippets.Â
Let’s First create a Sample HTML Button with Basic styling:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Create an HTML button that
acts like a link
</title>
<!-- Style to create button -->
<style>
.GFG {
width:100px;
height:50px;
background:green;
border:none;
color:white;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<!-- Adding link to the button on the onclick event -->
<button class="GFG">
Click Here
</button>
</body>
</html>
Now, Let’s explore each method along with the necessary syntax and example codes.
Methods to Add a Link to an HTML Button
1. Inline onclick Event:
The use of an inline onclick event. It associates a JavaScript function with the button element’s onclick attribute. When clicked, the function redirects the user to a specified URL using window.location.href.
Syntax:
<button onclick="window.location.href='https://ide.geeksforgeeks.org/';" class="GFG">Click Here</button>
Example: In this example we Create an HTML button styled with CSS. On click, it redirects to the GeeksforGeeks IDE using an inline onclick event.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Using Inline onclick Event
</title>
<style>
.GFG {
background-color: white;
border: 2px solid black;
color: green;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Adding link to the button on the onclick event -->
<button
class="GFG"
onclick=
"window.location.href = 'https://ide.geeksforgeeks.org';"
>
Click Here
</button>
</body>
</html>
Output:
Inline onclick Event Example Output
2. 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. Replace the below snippet with button element given in the above Sample Button Code.
Syntax:
<a href='https://ide.geeksforgeeks.org/'>
<button class="GFG">
Click Here
</button>
</a>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Using button tag inside a tag
</title>
<style>
.GFG {
background-color: white;
border: 2px solid black;
color: green;
padding: 5px, 10px; /* Corrected padding values */
cursor: pointer;
}
</style>
</head>
<body>
<!-- Adding button inside the link tag -->
<a href="https://ide.geeksforgeeks.org/">
<button class="GFG">
Click Here
</button>
</a>
</body>
</html>
Output:
3. Using Anchor tag as a Button link
This method create a simple anchor tag link and then apply some CSS property to makes it like a button.
Replace the below snippet in the body tag given in the above Sample Button Code.
Syntax:
<a href="https://ide.geeksforgeeks.org/" class="GFG">Click me</a>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Create an HTML button that
acts like a link
</title>
<!-- Style to create button -->
<style>
.GFG {
width:100px;
height:50px;
background:green;
border:none;
color:white;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<!-- Adding link to the button on the onclick event -->
<a href="https://ide.geeksforgeeks.org/" class="GFG">Click me</a>
</body>
</html>
Output:
Using Anchor tag as a Button link
4. Using form tags
Another approach is to use the action or formaction attribute within a <form> element. This method is more semantically correct and works well even inside forms. Replace the below snippet in the body tag with the button element given in the above Sample Button Code.
<form action="https://ide.geeksforgeeks.org/">
<button type="submit" class="GFG">Click me</button>
</form>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Create an HTML button that
acts like a link
</title>
<!-- Style to create button -->
<style>
.GFG {
width:100px;
height:50px;
background:green;
border:none;
color:white;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<!-- Adding link to the button on the onclick event -->
<form action="https://ide.geeksforgeeks.org/">
<button type="submit" class="GFG">Click me</button>
</form>
</body>
</html>
Output:
Using form tags
Note: The output will be same for every method.
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...