1. 使用CSS实现按钮hover时颜色变化，进一步加上点击效果

HTML部分

点击我

CSS部分

.color-button {
  background-color: #4286f4;
  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;
}

.color-button:hover {
  background-color: #316dc5;
}

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

2. 使用JavaScript实现按钮点击颜色变化

HTML部分

点击我

JavaScript部分

function changeColor() {
  var button = document.querySelector('.color-button');
  button.style.backgroundColor = "#316dc5";
}

3.结合上面两种方法，实现按钮hover时和点击时的颜色变化

HTML部分

点击我

JavaScript部分

function hoverColorChange() {
  var button = document.querySelector('.color-button');
  button.style.backgroundColor = "#316dc5";
}

function changeColor() {
  var button = document.querySelector('.color-button');
  button.style.backgroundColor = "#114696";
}

function resetColor() {
  var button = document.querySelector('.color-button');
  button.style.backgroundColor = "#4286f4";
}

CSS部分

.color-button {
  background-color: #4286f4;
  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;
}

.color-button:hover {
  background-color: #316dc5;
}