CSS 实现按钮按下效果 - 简单易懂的代码示例

使用 CSS 实现按钮按下效果非常简单，我们可以利用伪类选择器 :active 来完成。

**HTML 代码：**

<div class='button'>Click me</div>

**CSS 代码：**

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}

.button:active {
  background-color: #0056b3;
}

**效果：** 点击按钮时，背景色变暗。

**说明：**

这段代码使用了 :active 伪类选择器，它表示当元素被激活（鼠标按下）时，应用相应的样式。这里我们把按钮被按下时的背景色设置为 #0056b3，实现按下效果。