CSS按鈕左右切換圖片是Web頁面中常見的交互效果之一，它能夠優雅地為網頁內容增添豐富的動態體驗。實現左右切換圖片的CSS代碼如下：

/* 定義按鈕樣式 */
.button {
display: inline-block;
width: 30px;
height: 30px;
background-image: url(image1.png);
background-repeat: no-repeat;
}
/* 鼠標懸浮時更改背景圖 */
.button:hover {
background-image: url(image2.png);
}
/* 點擊按鈕后更改背景圖 */
.button:active {
background-image: url(image3.png);
}

通過定義樣式類`.button`的背景圖片，以及定義鼠標懸浮和點擊效果，實現了左右切換圖片的效果。在HTML中可以通過添加該樣式類到按鈕元素來使用：

上面的代碼會創建一個反復切換三張圖片的按鈕，非常簡單而又靈活。同時，該方法也可以用于其他交互式組件的設計，如輸入框的聚焦和失焦效果等。