如何创建一个像链接一样工作的 HTML 按钮？

我们可以轻松地创建一个充当链接并可点击的 HTML 按钮。让我们看看以下示例 -

  • 使用 <a> 标签创建 HTML 按钮链接
  • 使用 <form> 标签创建 HTML 按钮链接
  • 使用 onclick 事件创建 HTML 按钮链接

使用 <a> 标签创建 HTML 按钮链接

在此示例中，我们将使用 <a> 标签创建一个链接按钮。为此，<button> 标签设置在 <a> 标签内 -

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

添加光标到指针值，使光标看起来像是在按钮本身上的链接被点击。这是按钮样式 -

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

示例

现在让我们看看使用 <a> 标签创建 HTML 按钮链接的完整示例 -

<!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://tutorialspoint.com/tutorialslibrary.htm'>
   <button class="mybtn">
      Tutorial Library
   </button>
   </a>
</body>

输出

点击按钮链接教程库。它将打开按钮中添加的链接 -

使用表单标签创建 HTML 按钮链接

在此示例中，我们将使用 <form> 标签创建一个链接按钮。为此，<button> 标签设置在 <form> 标签内 -

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

添加光标到指针值，使光标看起来像是在按钮本身上的链接被点击。这是按钮样式 -

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

示例

现在让我们看看使用 <form> 标签创建 HTML 按钮链接的完整示例 -

<!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://tutorialspoint.com/latest/ebooks">
      <button class = "mybtn" type="submit">
         Ebooks
      </button>
   </form>
</body>

输出

点击按钮链接电子书。它将打开按钮中添加的链接 -

使用 onclick 事件创建 HTML 按钮链接

在此示例中，我们将使用 onclick 事件创建一个链接按钮 -

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

添加光标到指针值，使光标看起来像是在按钮本身上的链接被点击。这是按钮样式 -

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

示例

现在让我们看看使用 onclick 事件创建 HTML 按钮链接的完整示例 -

<!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://tutorialspoint.com/codingground.htm';">
      CodingGround
   </button>
</body>

输出

点击按钮链接CodingGround。它将打开按钮中添加的链接

更新于：2022-10-25

3K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告