带有链接的 HTML 按钮 - HTML

在 HTML 中，创建一个带有链接的按钮是一项基本任务。在本文中，我们将学习如何使用 HTML 代码创建一个带有链接的按钮。

HTML 代码

使用以下 HTML 代码可以创建一个简单的带有链接的按钮：

<a href="https://www.example.com" class="button"> Click me </a>

HTML 代码解释

在上面的代码中，<a> 标签用于创建链接，href 属性用于指定链接的 URL，class 属性用于添加 CSS 样式，以便将其转换为按钮，Click me 用于指定按钮上的文本。

CSS 样式

要将链接样式转换为按钮样式，我们可以使用以下 CSS 代码：

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

CSS 样式解释

在上面的代码中，我们使用了一些 CSS 样式，例如 background-color 用于设置背景颜色，padding 用于设置内边距等等，这些样式可以根据需要进行更改。

结论

我们已经学习了如何使用 HTML 和 CSS 代码创建一个带有链接的按钮。这可以帮助添加交互性和导航功能，让网站更具吸引力。