How to create an HTML button that acts like a link?

There are several methods to create an HTML button that acts as a link. Some of them are discussed below:
Note: Adding basic CSS property to the button in every method to make button looks better.

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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 = 'https://ide.geeksforgeeks.org';">
            Click Here
        </button>
    </body>
      
    </html>                    

    chevron_right

    
    

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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='https://ide.geeksforgeeks.org/'>
            <button class="GFG">
                Click Here
            </button>
        </a>
    </body>
      
    </html>                    

    chevron_right

    
    

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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="https://ide.geeksforgeeks.org/" class="GFG">
            Click here
        </a>
    </body>
      
    </html>                                   

    chevron_right

    
    

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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="https://ide.geeksforgeeks.org/">
            <button class = "gfg" type="submit">
                Click Here
            </button>
        </form>
    </body>
      
    </html>                    

    chevron_right

    
    

Note: The output will be same for every method.

Output:

  • Before clicking the button:
  • After clicking the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.