css3按钮事件实现

CSS3按钮事件实现

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 5px;
}

.btn:hover {
  background-color: #3e8e41;
}

.btn:active {
  background-color: #25632b;
}

CSS3可以使用:hover和:active伪类选择器简单地实现按钮的悬停和按下效果。

上面的代码定义了一个.btn类，其中包括按钮的基本样式和属性。当鼠标悬停在按钮上时，使用:hover伪类选择器更改其背景颜色。当用户按下按钮时，使用:active伪类选择器更改其背景颜色。