今天我們來學習如何使用HTML代碼，實現點擊按鈕變色的效果！

首先，在我們的HTML文檔中，需要添加一個按鈕元素，我們可以使用標簽來創建一個按鈕：

<button>點擊變色</button>

接著，我們需要為這個按鈕添加一些CSS樣式，來實現點擊后的變色效果。我們可以使用偽類選擇器:hover來添加鼠標懸停時的樣式，使用class類名稱來添加點擊后的樣式。具體代碼如下：

<style>
button:hover {
background-color: yellow;
}
.active {
background-color: red;
}
</style>

當我們點擊這個按鈕時，我們需要使用JavaScript來切換這個按鈕的樣式。我們可以使用addEventListener()方法來為這個按鈕添加一個click事件監聽器，當點擊按鈕時，切換按鈕的class類名稱為“active”，實現變色效果：

<script>
const button = document.querySelector('button');
button.addEventListener('click', () =>{
button.classList.toggle('active');
});
</script>

以上就是實現HTML點擊按鈕變色的完整代碼！