CSS3是一種引人注目的技術，可以創建網站上的一些驚人效果。其中之一就是按鈕切換效果。通過使用CSS3的一些屬性，我們可以創建非常漂亮的按鈕，這些按鈕可以在被單擊時改變它們的外觀。

.button {
width: 100px;
height: 40px;
font-size: 18px;
line-height: 40px;
text-align: center;
color: #ffffff;
background-color: #007bff;
border-radius: 5px;
cursor: pointer;
transition: all ease-in-out 0.2s;
}
.button:hover {
background-color: #6c757d;
}
.button.active {
background-color: #28a745;
}

上述代碼中，我們首先創建了一個普通的按鈕，使用了簡單的CSS樣式。然后，我們添加了一個:hover偽類來創建按鈕的懸停效果。當鼠標懸停在按鈕上時，按鈕的背景顏色將改變為灰色。

接下來，我們創建了一個.active類，當按鈕被單擊時它將被添加到按鈕上。當此類被添加到按鈕上時，按鈕的背景顏色將改變為綠色。它的過渡時間設置為0.2秒，所以切換按鈕時不會顯得很突然。

因此，我們可以使用CSS3輕松創建非常漂亮的按鈕切換效果。它是一種非常方便的方式，可以為您的用戶界面添加一些額外的美感。