How do I create an HTML button that acts like a link?

HTML Web Development Front End Technology

We can easily create an HTML button to act like a link and clickable. Let us see the following examples −

Create an HTML button link with the <a> tag
Create an HTML button link with the <form> tag
Create an HTML button link with the onclick event

Create an HTML button link with the <a> tag

In this example, we will create a link button with <a> tag. The <button> tag is set inside the <a> tag for this −

<a href='https://www.tutorialspoint.com/tutorialslibrary.htm'>
   <button class="mybtn">
      Tutorial Library
   </button>
</a>

Do add the cursor to the pointer value to make the cursor look like a link is being clicked on the button itself. Here’s the button style −

.mybtn {
   background-color: white;
   text-align: center;
   display: inline-block;
   font-size: 15px;
   cursor: pointer;
}

Example

Let us now see the complete example to create an HTML button link with the <a> tag −


<!DOCTYPE html>
<html>
<head>
   <title>Button Link</title>
   <style>
      .mybtn {
         background-color: white;
         text-align: center;
         display: inline-block;
         font-size: 15px;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <h1>Free Resources</h1>
   <p>Refer the free tutorials:</p>
   <a href='https://www.tutorialspoint.com/tutorialslibrary.htm'>
   <button class="mybtn">
      Tutorial Library
   </button>
   </a>
</body>

Output

Click on the button link Tutorial Library. It will open the link added in the button −

Create an HTML button link with the form tag

In this example, we will create a link button with the <form> tag. The <button> tag is set inside the <form> tag for this −

<form action="https://www.tutorialspoint.com/latest/ebooks">
   <button class = "mybtn" type="submit">
      Ebooks
   </button>
</form>

Do add the cursor to the pointer value to make the cursor look like a link is being clicked on the button itself. Here is the button style −

mybtn {
   background-color: white;
   text-align: center;
   display: inline-block;
   font-size: 15px;
   cursor: pointer;
}

Example

Let us now see the complete example to create an HTML button link with the <form> tag −


<!DOCTYPE html>
<html>
<head>
   <title>Button Link</title>
   <style>
      .mybtn {
         background-color: white;
         text-align: center;
         display: inline-block;
         font-size: 15px;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <h1>Resources</h1>
   <p>Refer the Ebooks:</p>
   <form action="https://www.tutorialspoint.com/latest/ebooks">
      <button class = "mybtn" type="submit">
         Ebooks
      </button>
   </form>
</body>

Output

Click on the button link Ebooks. It will open the link added in the button −

Create an HTML button link with the onclick event

In this example, we will create a link button with the onclick event −

<button class="mybtn" onclick="window.location.href =
   'https://www.tutorialspoint.com/codingground.htm';">
   CodingGround
</button>

Do add the cursor to the pointer value to make the cursor look like a link is being clicked on the button itself. Here is the button style −

mybtn {
   background-color: white;
   text-align: center;
   display: inline-block;
   font-size: 15px;
   cursor: pointer;
}

Example

Let us now see the complete example to create an HTML button link with the onclick event −


<!DOCTYPE html>
<html>
<head>
   <title>Button Link</title>
   <style>
      .mybtn {
         background-color: white;
         text-align: center;
         display: inline-block;
         font-size: 15px;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <h1>Online Compiler</h1>
   <p>Refer the complier to run programs online:</p>
   <button class="mybtn"
      onclick="window.location.href = 'https://www.tutorialspoint.com/codingground.htm';">
      CodingGround
   </button>
</body>