以下是一个示例解决方法，其中包含了使用JavaScript和CSS来实现按钮以相同的功能而呈现不同的变化：

HTML代码：

按钮1
按钮2
按钮3

CSS代码：

.button {
  background-color: #ccc;
  padding: 10px;
  border: none;
  cursor: pointer;
}

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

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

JavaScript代码：

// 获取所有的按钮元素
var buttons = document.getElementsByClassName("button");

// 为每个按钮添加点击事件监听器
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    // 移除所有按钮的active类名
    for (var j = 0; j < buttons.length; j++) {
      buttons[j].classList.remove("active");
    }
    // 为当前点击的按钮添加active类名
    this.classList.add("active");
    
    // TODO: 添加按钮点击后的功能代码
  });
}

在这个示例中，我们首先给每个按钮添加了相同的class名"button"，并使用CSS来定义按钮的样式。当鼠标悬停在按钮上时，按钮会变成较深的颜色。当按钮被点击时，它会添加一个名为"active"的类名，这样我们就可以根据这个类名来为按钮添加不同的样式。

在JavaScript代码中，我们首先获取了所有带有"class"为"button"的元素，并为每个按钮添加了点击事件监听器。当按钮被点击时，我们首先移除所有按钮的"active"类名，然后为当前点击的按钮添加"active"类名。这样就实现了按钮以相同的功能而呈现不同的变化。

请注意，上述代码中的TODO注释部分代表您可以根据实际需求添加按钮点击后的功能代码。