前端開發者經常需要在網頁中添加交互性功能來提升用戶體驗。其中一種非常常見的功能就是在按鈕點擊時切換不同的CSS樣式。

.btn{
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.btn:hover{
background-color: lightblue;
}
.btn.active{
background-color: red;
}

上面的代碼樣式表示了一個普通的按鈕樣式，當鼠標放在其上時顏色會變為淡藍色。同時，當按鈕處于活動狀態時，會切換為紅色背景。

那么如何通過代碼實現按鈕點擊時切換CSS樣式呢？比較簡單的方法是使用JavaScript代碼來監聽按鈕的點擊事件，然后通過修改對應元素的class名來切換不同的CSS樣式。

var button = document.querySelector('.btn');
button.addEventListener('click', function(){
button.classList.toggle('active');
});

以上的代碼中，我們先使用了document.querySelector()來定位到頁面上的按鈕元素，并使用addEventListener()方法添加了一個點擊事件的監聽器。當按鈕被點擊時，我們會調用一個可以切換元素class屬性的classList.toggle()方法，從而實現切換CSS樣式的目的。

切換CSS樣式的方式有很多，上述代碼只是其中一種簡單的實現方法。開發者可以根據實際需求進行更加靈活的設計和操作。