CSS3切換按鈕樣式

.button {
border-radius: 4px;
border-width: 2px;
border-color: #000;
padding: 10px;
cursor: pointer;
}
.button:hover {
background-color: #000;
color: #fff;
}
.button:active {
transform: translateY(2px);
}

CSS3可以輕松地為按鈕添加各種懸停和活動狀態，使其在用戶與之交互時更加生動。通過使用border-radius屬性，可以使按鈕的邊緣呈現圓角效果，使其更具現代感；此外，借助border-width和border-color屬性可以調整按鈕的邊框寬度和顏色，從而使其更加個性化。

為了增強用戶交互體驗，我們可以使用:hover狀態來添加懸停效果，例如更改按鈕的背景顏色和文字顏色等。:active狀態可以讓按鈕在用戶點擊時顯示出變化，通過使用transform屬性的translateY方法，我們可以使按鈕稍微向下移動一點，增加點擊反饋。

總而言之，CSS3可以讓按鈕的樣式更加鮮明、生動，從而使網頁更具吸引力和用戶友好性。我們可以根據需求隨意定制按鈕的樣式，創造出獨具特色的UI效果。