CSS 按钮按下效果

在本文中，我们将介绍如何使用CSS创建按钮按下效果。按钮按下效果是指当用户点击或按下按钮时，按钮的外观发生改变，给用户一种按钮被按下的视觉反馈。

阅读更多：CSS 教程

1. 使用:hover伪类

最简单的方式是使用CSS中的:hover伪类来实现按钮按下效果。通过在按钮的样式中定义:hover伪类的样式，当鼠标悬停在按钮上时，按钮的外观会发生变化。

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

.button:hover {
  background-color: #C62828;
}

在上面的例子中，当鼠标悬停在按钮上时，按钮的背景色会从#F44336变为#C62828。

2. 使用:active伪类

除了:hover伪类，我们还可以使用:active伪类来实现按钮按下效果。与:hover伪类不同的是，:active伪类的样式会在用户点击按钮并保持按下状态时生效。

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

.button:active {
  background-color: #C62828;
}

在上面的例子中，当用户点击按钮并保持按下状态时，按钮的背景色会从#F44336变为#C62828。

3. 使用JavaScript和CSS类

我们也可以使用JavaScript和CSS类来实现按钮按下效果。首先，我们在HTML中为按钮添加一个监听器，并在用户点击按钮时将一个CSS类添加到按钮上。

<button class="button" onclick="buttonPressed(this)">Button</button>

然后，在CSS中定义按钮按下状态的样式。

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

.button.pressed {
  background-color: #C62828;
}

最后，在JavaScript中定义按钮被点击时添加或删除CSS类的函数。

function buttonPressed(button) {
  button.classList.add("pressed");
  setTimeout(function() {
    button.classList.remove("pressed");
  }, 300);
}

在上面的例子中，当用户点击按钮后，按钮的背景色会立即变为#C62828，然后在300毫秒后恢复为#F44336。

4. 使用CSS动画

除了上述方法之外，我们还可以使用CSS动画来实现按钮按下效果。通过定义一个按钮按下的动画效果，并在用户点击按钮时应用该动画，我们可以使按钮的外观在按下时产生平滑的过渡效果。

.button {
  background-color: #F44336;
  color: white;
  padding: 10px 20px;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.button:active {
  animation-name: buttonPress;
  animation-duration: 0.3s;
}

@keyframes buttonPress {
  from {background-color: #F44336;}
  to {background-color: #C62828;}
}

在上面的例子中，当用户点击按钮时，按钮的背景色会从#F44336过渡到#C62828，在0.3秒内完成过渡动画。