[分享]css中click鼠标点击效果

在CSS中，我们可以通过点击鼠标添加点击效果。点击效果使得页面更加生动且易于理解。这里，我们来看看如何为元素添加点击效果。.mybutton { backgroundcolor: 4CAF50; bo...

在CSS中，我们可以通过点击鼠标添加点击效果。点击效果使得页面更加生动且易于理解。这里，我们来看看如何为元素添加点击效果。

.my-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;
}

.my-button:active {
  background-color: #3e8e41;
  transform: translateY(4px);
} 

在上面的代码中，我们首先设置一个.my-button类，用于表示要添加点击效果的按钮。我们定义了按钮的样式，包括背景色、边框、颜色、内边距、文本对齐、文本装饰、显示方式、字体大小、外边距和光标样式。

接下来，我们使用:nth-child伪类选择按钮的状态。在这种情况下，我们使用:active选择器，它表示当鼠标单击按钮时，“active”状态将被应用。我们通过改变背景颜色和指定一个垂直方向上的像素偏移来改变按钮的样式，从而为按钮添加了点击效果。

到此为止，我们已经学习了如何为页面元素添加鼠标点击效果。通过使用上述技术，您可以使您的网站更加生动且易于理解。