How to Put or Wrap Button Tag as a Nested Child Element inside Anchor (a) Link Tag to Make it Clickable Using HTML5

Here, I’m going to teach How to Put or Wrap Button Tag as a Nested Child Element inside Anchor (a) Link Tag to Make it Clickable Using HTML5. Let’s go for the article to do this task below.

How to Put or Wrap Button Tag as a Nested Child Element inside Anchor (a) Link Tag to Make it Clickable Using HTML5

How to Put or Wrap Button Tag as a Nested Child Element inside Anchor (a) Link Tag to Make it Clickable Using HTML5

In order to get started you need to make an index.html file and copy-paste the following code

index.html

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

Final Words

We hope the article How to Put or Wrap Button Tag as a Nested Child Element inside Anchor (a) Link Tag to Make it Clickable Using HTML5 will be beneficial to you. Share the article with other CSS and HTML developers on social media. If you face any issues regarding this article? then ask via the comment section. Give your valuable feedback about the article with us. Thank You!

Share on:

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Comment