Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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.




    <!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>                    

    
    

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

    
    

Note: The output will be same for every method.

Output:

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

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.



Last Updated : 29 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads