HTML Introduction

How to Add Link to HTML Button?

Last Updated : 12 Jul, 2025

In HTML, links connect webpages using the <a> tag, with the href attribute specifying the destination URL. The simplest way to do this is to add a link to a button by wrapping it inside <a> tag.

HTML

<a href="https://www.geeksforgeeks.org/html/html-tutorial/">
  	<button>Click me</button>
</a>

Note: However, this approach violates WCAG (Web Content Accessibility Guidelines), as buttons and anchor tags serve different purposes. Buttons are for actions, while anchor tags are for navigation. Mixing them can confuse screen readers and impact accessibility for users with disabilities.

Correct Ways to Add Links to HTML Buttons While Following Accessibility Guidelines

Here are some accessibility-friendly alternatives for adding links to buttons in HTML:

Approch 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://www.geeksforgeeks.org/community/';">
        Click Here
    </button>
</body>
</html>

Approach 2: Form with Button (For Submitting)

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://www.geeksforgeeks.org/community/">
        <button type="submit" class="GFG">Click me</button>
       </form>
</body> 
</html>

Output:

Approch 3: Using Anchor tag as a Button link [Tricky]

This method creates a simple anchor tag link and then applies some CSS properties to make it look like a button.

Syntax:

 <a href="https://www.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://www.geeksforgeeks.org/community/" class="GFG">Click me</a>
</body> 
</html>

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.

How to add link to HTML button?

HTML Introduction

M

manaschhabra2

Improve

Article Tags :

Similar Reads

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript