<div>和<button>是HTML中常見的元素，分別用于創建一個容器和一個按鈕。在某些情況下，我們可能想要通過修改CSS樣式來改變按鈕的顏色，以實現一種交互效果。本文將通過幾個代碼案例來詳細解釋如何通過改變<div>和<button>的樣式來實現按鈕的顏色變化。

第一個案例是通過直接在HTML代碼中使用內聯樣式的方式來改變按鈕的顏色。

<button style="background-color: red;">紅色按鈕</button>
<button style="background-color: green;">綠色按鈕</button>

在上面的代碼中，通過在<button>標簽的style屬性中指定background-color屬性的值來改變按鈕的背景顏色。例如，設置style="background-color: red;"將按鈕的背景顏色設置為紅色，而設置style="background-color: green;"將按鈕的背景顏色設置為綠色。

第二個案例是通過使用CSS樣式表來改變按鈕的顏色。

<style>
.red-button {
background-color: red;
}
<br>
    .green-button {
background-color: green;
}
</style>
<br>
<button class="red-button">紅色按鈕</button>
<button class="green-button">綠色按鈕</button>

上述代碼中，我們在<style>標簽中定義了兩個CSS類。.red-button類定義了背景顏色為紅色，.green-button類定義了背景顏色為綠色。然后，在<button>標簽中使用class屬性來引用這兩個CSS類，從而改變按鈕的背景顏色。

第三個案例是通過使用JavaScript來動態改變按鈕的顏色。

<style>
.red-button {
background-color: red;
}
<br>
    .green-button {
background-color: green;
}
</style>
<br>
<script>
function changeColor(color) {
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].style.backgroundColor = color;
}
}
</script>
<br>
<button onclick="changeColor('red')">紅色按鈕</button>
<button onclick="changeColor('green')">綠色按鈕</button>

在上述代碼中，我們定義了和前面相同的CSS樣式。然后，在<script>標簽中定義了一個名為changeColor的JavaScript函數，該函數接受一個參數color，將所有<button>的背景顏色設置為傳入的顏色值。最后，通過在<button>標簽的onclick屬性中調用changeColor函數，并傳入相應的顏色值，來實現按鈕顏色的動態改變。

通過這幾個案例，我們可以看到，通過修改<div>和<button>的樣式，我們可以實現按鈕的顏色變化。無論是通過內聯樣式、CSS樣式表還是JavaScript，都能夠靈活地實現這一效果。這種功能的應用場景非常廣泛，可以用于網頁設計中的交互效果，或者是移動端應用的按鈕設計等。