添加伪按钮 - CSS

在 Web 开发中，我们经常需要为用户提供按钮进行交互，但是原生按钮会有其自带样式和限制。因此我们可以通过 CSS 来自定义按钮样式以及添加伪按钮。

自定义按钮样式

我们可以使用 CSS 来定义按钮的样式，包括背景、边框、文字等等。以下是一个示例：

button {
  background-color: #f44336;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

这会将所有 <button> 元素的样式都设定为红色背景、白色文本、4 个像素圆角边框等。

添加伪按钮

伪按钮就是指我们使用 CSS 技术模拟出的按钮，其实现主要基于 CSS3 的伪元素 ::before 和 ::after。

我们可以根据需求自定义伪按钮的效果。以下是一个示例：

.button {
  position: relative;
  display: inline-block;
  padding: 8px 16px;
  color: white;
  background-color: #f44336;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}

.button:hover::before {
  opacity: 1;
}

这会将所有带有 button 类名的元素设定为圆角矩形、红色背景、白色文本、半透明阴影。

结语

添加伪按钮可以让网页看起来更加美观和交互友好。经过上面的介绍，你已经学会了如何自定义按钮样式和添加伪按钮。赶快尝试一下吧！