带有 href 的 HTML 按钮

在 HTML 中，可以通过添加 href 属性来创建链接。使用相同的属性，您还可以将链接应用到按钮上。本文将介绍如何创建带有 href 的 HTML 按钮。

创建简单的带有 href 的按钮

要创建带有 href 的按钮，请使用 "a" 标签，同时指定 "class" 和 "href" 属性，如下所示：

<a class="btn" href="#">Click me</a>

在上面的代码中，我们指定了 "class" 属性为 "btn"，这是一个 CSS 类，我们可以用它来样式化按钮。然后，我们指定了 "href" 属性为 "#"，这表示点击按钮时不会进行任何操作。

使用 CSS 样式化带有 href 的按钮

通过为按钮添加样式可以使其看起来更像按钮。下面是一个简单的 CSS 样式表，可以对带有 "btn" 类的按钮进行样式设置：

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}

制作可点击的带有 href 的按钮

如果您想要制作一个可点击的带有 href 的按钮，您可以利用 JavaScript 来实现。下面是一个使用 JavaScript 脚本来使带有 href 的按钮变得可点击的例子：

<a class="btn" href="#" onclick="alert('Button has been clicked!')">Click me</a>

在上面的代码中，我们添加了一个 onclick 事件处理程序，当按钮被点击时，就会弹出一个对话框。

结论

现在您已经知道如何创建带有 href 的 HTML 按钮了。通过样式化和添加事件处理程序，您可以使您的按钮更加功能齐全。