css3按钮点击效果如何实现

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

HTML:

    
    
    
    


    Click me

CSS (styles.css):

.btn {
  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;
  transition-duration: 0.4s;
}

.btn:active {
  background-color: #45a049;
}

在这个示例中，我们创建了一个名为.btn的按钮。当用户点击按钮时，:active伪类会使按钮的背景颜色从#4CAF50变为#45a049，从而产生点击效果。transition-duration属性用于设置颜色变化的持续时间。