CSS圖片按鈕滑動欄是網頁開發中常見的元素，它可以為用戶提供一個方便的操作入口。在這篇文章中，我們將介紹如何使用CSS來創建一個簡單的圖片按鈕滑動欄。

HTML代碼：
<div class="slider">
<div class="inner">
<div class="button active"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
</div>
CSS代碼：
.slider {
width: 300px;
height: 50px;
position: relative;
overflow: hidden;
}
.inner {
position: absolute;
top: 0;
left: 0;
transition: transform 0.3s ease;
}
.button {
width: 50px;
height: 50px;
margin-right: 20px;
float: left;
background-image: url('button.png');
}
.active {
background-position: 0 -50px;
}

上面的代碼中，我們使用了一個包含幾個圖片按鈕的div容器，并將其設置為相對定位。同時，我們使用了一個.inner div元素作為按鈕的容器，在CSS中設置了它的position屬性為absolute，并使用了一個過渡效果來讓按鈕滑動。

每個按鈕都是一個50x50像素的div元素，并使用了相同的背景圖片。我們可以使用CSS的background-position屬性來改變每個按鈕的背景圖像位置，以達到高亮顯示某個按鈕的目的。

為了使按鈕滑動起來，我們使用了CSS3過渡效果來改變.inner div元素的transform屬性。當點擊某個按鈕時，我們只需要改變它的背景圖像位置，并更新.inner div元素的transform屬性值即可。

通過以上步驟，我們成功地創建了一個簡單的CSS圖片按鈕滑動欄。這是一個非常基礎的例子，你可以根據需要對其進行更多的定制與優化。