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

.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;
}

上述代碼中，我們首先創(chuàng)建了一個(gè)普通的按鈕，使用了簡(jiǎn)單的CSS樣式。然后，我們添加了一個(gè):hover偽類來(lái)創(chuàng)建按鈕的懸停效果。當(dāng)鼠標(biāo)懸停在按鈕上時(shí)，按鈕的背景顏色將改變?yōu)榛疑?/p>

接下來(lái)，我們創(chuàng)建了一個(gè).active類，當(dāng)按鈕被單擊時(shí)它將被添加到按鈕上。當(dāng)此類被添加到按鈕上時(shí)，按鈕的背景顏色將改變?yōu)榫G色。它的過(guò)渡時(shí)間設(shè)置為0.2秒，所以切換按鈕時(shí)不會(huì)顯得很突然。

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