要实现按钮颜色变化的效果，可以使用HTML和CSS来完成。以下是一个示例代码，演示了按钮在不同状态下的颜色变化。

HTML代码：

点击我

CSS代码：

.color-change-btn {
  background-color: blue; /* 初始状态下的背景颜色 */
  color: white; /* 初始状态下的文字颜色 */
  transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
}

.color-change-btn:hover {
  background-color: red; /* 鼠标悬停时的背景颜色 */
  color: white; /* 鼠标悬停时的文字颜色 */
}

.color-change-btn:focus {
  background-color: green; /* 获得焦点时的背景颜色 */
  color: white; /* 获得焦点时的文字颜色 */
}

.color-change-btn:active {
  background-color: yellow; /* 按钮按下时的背景颜色 */
  color: black; /* 按钮按下时的文字颜色 */
}

在上面的示例中，我们使用了.color-change-btn类来定义按钮的样式。通过不同的伪类选择器，我们可以定义按钮在不同状态下的颜色。

• :hover 伪类选择器用于定义鼠标悬停时按钮的样式；
• :focus 伪类选择器用于定义按钮获得焦点时的样式；
• :active 伪类选择器用于定义按钮按下时的样式。

通过添加transition属性，我们可以为按钮的背景颜色和文字颜色添加过渡效果，使颜色的变化更平滑。

通过在按钮上添加class="color-change-btn"，按钮将应用上述定义的样式，实现按钮颜色变化的效果。