要实现按钮颜色的变化，可以使用以下代码示例：

HTML代码：

点击按钮

CSS代码：

.button-default {
  background-color: #333;
  color: #fff;
}

.button-hover {
  background-color: #555;
}

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

JavaScript代码：

var button = document.getElementById("myButton");

button.addEventListener("mouseover", function() {
  button.classList.add("button-hover");
});

button.addEventListener("mouseout", function() {
  button.classList.remove("button-hover");
});

button.addEventListener("mousedown", function() {
  button.classList.add("button-active");
});

button.addEventListener("mouseup", function() {
  button.classList.remove("button-active");
});

以上代码中，我们首先给按钮添加了一个默认样式.button-default，设置了背景颜色为#333，文字颜色为白色。然后通过CSS添加了按钮在鼠标悬停时的样式.button-hover，设置了背景颜色为#555。接着，通过JavaScript代码监听按钮的鼠标事件mouseover、mouseout、mousedown和mouseup，并在对应事件发生时添加或移除相应的样式类，实现按钮颜色的变化效果。

这样，当鼠标悬停在按钮上时，按钮的背景颜色会变为#555；当鼠标按下按钮时，按钮的背景颜色会变为#777，松开鼠标后恢复为默认样式。