用css实现简单的点击按钮动态效果

在CSS中，可以使用:active伪类来实现按钮的点击动态效果。以下是一个简单的例子：

HTML:




<button class="dynamic-button">Click Me</button>

CSS:




.dynamic-button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition: background-color 0.3s; /* Transition effect for hover */
}
 
.dynamic-button:active {
  background-color: #3e8e41; /* Darker shade of green */
}

在这个例子中，按钮在被点击时背景颜色会变成更深的绿色，通过使用:active伪类，我们可以为按钮添加一个点击时的视觉反馈。

用css实现简单的点击按钮动态效果

评论已关闭

推荐阅读