How to Add Link to HTML Button?
Last Updated :
06 May, 2025
A link in HTML connects one webpage to another, allow smooth navigation. In HTML , links are created using the <a> tag. The href attribute within the tag specifies the URL or path to the destination.
We are given an HTML button, to add a link to the HTML button, we can wrap the button inside the <a> tag so that the buttons act as a link.
Example: In the below example, we wrap the button inside <a> tag.
HTML
<a href="https://www.geeksforgeeks.org/html-tutorial/">
<button>Click me</button>
</a>
Let's discuss some approaches to add a link to an HTML Button.
Approach 1: Using Inline onclick Event
Using an inline onclick event 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://www.geeksforgeeks.org/community/';" class="GFG">Click Here</button>
Example: In this example we Create an HTML button styled with CSS. On click, it redirects to the GeeksforGeeks Community 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://geeksforgeeks.org/community';">
Click Here
</button>
</body>
</html>
This method creates a button inside an anchor tag. The anchor tag redirects the webpage to the given location.
Syntax:
<button class="GFG">
Click Here
</button>
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://geeksforgeeks.org/community/">
<button class="GFG">
Click Here
</button>
</a>
</body>
</html>
This method creates a simple anchor tag link and then applies some CSS properties to make it look 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://geeksforgeeks.org/community/" class="GFG">Click me</a>
</body>
</html>
Another approach is to use the action or form action attribute within a <form> element. This method is semantically correct and works well inside forms.
<button type="submit" class="GFG">Click me</button>
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://geeksforgeeks.org/community/">
<button type="submit" class="GFG">Click me</button>
</form>
</body>
</html>
Output:
Also Try, To Improve the Look of Your Button
- Add a Live Demo for Interactive Preview.
- Add accessibility tips like aria-label or role="button".
- Mention cross-browser compatibility considerations.
- Include sample CSS for consistent button styling.
- Highlight the benefits of using semantic HTML elements.
- Warn against common mistakes like invalid tag nesting.
Similar Reads
How to Add Button in HTML?
Buttons in HTML are interactive elements that users can click to trigger certain actions, such as submitting forms, navigating to different pages, or executing JavaScript functions. We can use either the <button> tag or <input type="button"> tag to create a button.1. Using <button>
1 min read
How to add icons in the button in HTML ?
Adding icons in buttons in HTML involves including visual symbols or images within buttons to enhance their appearance and usability. This can be done using icon libraries like Font Awesome, Bootstrap Icons, or Material Icons, or by inserting images directly with <img> tags for visual cues.Add
3 min read
How to Link a Button to Another Page in HTML?
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.PrerequisitesHTMLCSS1. Using <a> Tag Styled as ButtonThe <a> tag is traditiona
3 min read
How to Use Images as Buttons in HTML?
Images as buttons means using pictures that you can click like buttons. They make websites look better and more interactive. Here are different ways to use Images as a button in HTML.1. Using img Tag Inside Button ElementWe can wrap the <img> tag inside a <button> element. This technique
2 min read
How to Add a Link in a HTML Tooltip ?
Adding the link in the HTML tooltip involves embedding a hyperlink within the tooltip element, mainly used for user interaction such as hovering over a specific area. Below are the approaches to add a link in a HTML tooltip: Table of Content Using anchor TagAdd a link using JavaScriptUsing anchor Ta
3 min read
How to Add Button Inside an Input Field in HTML ?
Integrating a button inside an input box is a common design pattern in web development, often seen in search bars, where a “search†button sits within the text input field, or in password fields that include a “show/hide†toggle. This UI element enhances user experience by offering a clear, interact
3 min read
How to Add Icons in HTML?
Icons in HTML are small images that show actions or items on a website, like a "home" button or a "search" symbol. They help people find things easily. To add icons in HTML, you can use an icon library like Font Awesome, Bootstrap Icons, Google Icons, and Image Icons.1. Using Font Awesome IconsFont
2 min read
How to Change Button Size in HTML?
To change the size of a button in HTML, there are several methods such as using the style attribute, external CSS, or adjusting the padding and font size. Modifying the button’s size enhances both the visual design and the user experience of a website.Here are three approaches to changing the size o
2 min read
How to Add JavaScript in HTML Document?
To add JavaScript in HTML document, several methods can be used. These methods include embedding JavaScript directly within the HTML file or linking an external JavaScript file.Inline JavaScriptYou can write JavaScript code directly inside the HTML element using the onclick, onmouseover, or other ev
3 min read
How to Create a Hyperlink in HTML?
If we want to navigate from one page to another then Hyperlink comes into play. It provides you the link to navigate to another page, on hovering that link the cursor turns into a little hand. Hyperlink enables us to connect one page to another, navigate to specific sections, or even open applicatio
2 min read