CSS3按鈕切換動畫是一種流行的網頁設計技術，可以使網站更具有吸引力和互動性。

.button {
background-color: #4CAF50; /* 綠色 */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button:hover {
background-color: #008CBA; /* 藍色 */
color: white;
}
.button:active, .button:focus {
background-color: #ff0000; /* 紅色 */
outline: none;
}

上面的CSS代碼中，.button類定義了按鈕的基本樣式，包括背景顏色、邊框、文本顏色、內邊距、字體大小、外邊距和過渡效果等。當鼠標懸停在按鈕上時，會觸發:hover偽類，此時按鈕背景顏色變成藍色，文本顏色變為白色。當用戶按下按鈕時，會觸發:active偽類，此時按鈕背景顏色變成紅色。

為了實現按鈕切換效果，可以使用CSS動畫技術。以下代碼演示了如何在兩個不同的按鈕之間切換：

.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input { 
display:none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}

上述代碼中，.switch類定義了開關控件的容器，包含一個隱藏的輸入框（input），以及一個使用:after偽元素實現的滑動塊（slider）。當用戶點擊開關時，輸入框的狀態會發生改變，狀況變為:checked或:focus，此時使用:checked或:focus + .slider選擇器，可以控制滑動塊的位置和樣式。

總之，使用CSS3按鈕切換動畫可以有效增強網站的用戶體驗，提高用戶的參與度和忠誠度。