如何在 CSS 中添加按钮

在网站或应用程序中，按钮是一种常见的用户界面元素，用于触发操作或提交表单数据。在 CSS 中，可以使用多种方式创建按钮。

使用 button 标签

HTML 中的 <button> 标签实际上就是一个按钮，可以使用 CSS 来样式化。以下是创建一个简单按钮的示例代码：

<button class="my-button">Click me</button>

.my-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

这个例子展示了一个固定背景颜色、白色字体颜色和圆角边角的按钮。 padding 属性用于控制按钮的大小， font-size 属性则控制文本的大小。

使用 a 标签

除了 <button> 标签之外，还可以使用 <a> 标签来创建按钮。与创建链接时使用的 <a> 标签相同，只需添加一个类名并利用 CSS 样式化即可。以下是示例代码：

<a href="#" class="my-button">Click me</a>

.my-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

在这个例子中，将 <a> 元素转换为行内块元素（ display: inline-block; ），这将使它像一个按钮一样呈现，并且 text-decoration 属性被设置为 none ，因为这个按钮不应该被视为链接，而是作为一个可点击元素。

利用伪类

当用户与按钮进行交互时，例如悬停或单击时，使用伪类创建交互效果是很常见的。以下是示例代码：

.my-button:hover {
  background-color: darkblue;
}

.my-button:active {
  background-color: lightblue;
}

这个示例将在悬停时使按钮颜色更深，而在按钮单击时变为浅蓝色。

总结

在 CSS 中创建按钮非常简单，可以使用 <button> 标签或 <a> 标签，然后应用样式来使它看起来像个按钮。可以利用伪类来创建各种动态效果，例如悬停和单击状态。