要实现按钮上的范围背景颜色变化，可以使用CSS和JavaScript来实现。以下是一个示例代码：

HTML:

点击按钮

CSS:

#myButton {
  background-color: blue;
  transition: background-color 0.3s ease;
}

#myButton:hover {
  background-color: red;
}

JavaScript:

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

button.addEventListener("mousedown", function() {
  button.style.backgroundColor = "green";
});

button.addEventListener("mouseup", function() {
  button.style.backgroundColor = "blue";
});

在上面的示例中，CSS部分定义了按钮的默认背景颜色为蓝色，并在按钮悬停时将背景颜色变为红色。transition属性用于定义背景颜色变化的动画效果。

JavaScript部分使用addEventListener方法为按钮添加了mousedown和mouseup事件监听器。当鼠标按下按钮时，背景颜色变为绿色；当鼠标释放按钮时，背景颜色恢复为蓝色。

通过组合使用CSS和JavaScript，可以实现按钮上的范围背景颜色变化效果。