CSS設置左右拉鏈按鈕是網頁設計中常見的效果，可以為用戶提供更加人性化的交互方式。下面介紹如何實現這種效果。

/* 定義按鈕樣式 */
.zipper-btn {
width: 30px;
height: 30px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
outline: none;
cursor: pointer;
}
/* 設置按鈕位置 */
.left-btn {
position: absolute;
left: 0;
}
.right-btn {
position: absolute;
right: 0;
}
/* 定義按鈕圖標 */
.zipper-btn::before,
.zipper-btn::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: #333;
border-radius: 50%;
}
/* 設置左側按鈕圖標位置 */
.left-btn::before {
left: 5px;
top: 50%;
transform: translateY(-50%);
}
.left-btn::after {
left: 12px;
top: 50%;
transform: translateY(-50%);
}
/* 設置右側按鈕圖標位置 */
.right-btn::before {
right: 12px;
top: 50%;
transform: translateY(-50%);
}
.right-btn::after {
right: 5px;
top: 50%;
transform: translateY(-50%);
}

以上代碼實現了左右拉鏈按鈕的樣式和位置，其中關鍵是使用了position定位，使按鈕固定在左右兩側，然后使用偽元素before和after設置了按鈕的圖標。需要注意的是，圖標的位置和樣式需要根據實際需求進行微調。