CSS圖片輪播加按鈕是一個常見的網頁設計特效，通過CSS樣式和JavaScript腳本的結合，可以實現多張圖片在同一位置輪流顯示，并加上控制按鈕，方便用戶進行圖片的選擇和操作。

代碼如下：
HTML結構：
CSS樣式：
.slider {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
}
.slider img {
width: 400px;
height: 300px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.slider img.active {
opacity: 1;
}
.slider-btns {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.slider-btn {
width: 12px;
height: 12px;
margin: 0 5px;
background-color: #ccc;
border-radius: 50%;
border: none;
outline: none;
}
.slider-btn.active {
background-color: #f00;
}

以上是一個簡單的CSS圖片輪播加按鈕的代碼示例，其中，HTML結構的.slider包裹了多張圖片，并通過CSS樣式設置了寬高、隱藏溢出、及相對定位等屬性。每張圖片都設置了絕對定位、位置坐標、透明度和過渡時間屬性，以實現輪播特效。

同時，在.slider下還添加了一個.slider-btns的控制按鈕容器，內部包含多個.slider-btn按鈕元素，樣式設置包括背景顏色、邊框圓角大小和位置及狀態變化顏色等屬性。

通過JavaScript腳本，我們可以使用addEventListener監聽每個按鈕的點擊事件，并通過classList.toggle動態添加或刪除active類名，以實現按鈕狀態的切換和圖片透明度的切換。

以上是一個CSS圖片輪播加按鈕的簡單實例，可以根據需要進行更復雜的設計與實現，進一步提升網頁的可視性和用戶體驗。