CSS左右小箭頭按鈕是網(wǎng)頁設(shè)計(jì)中非常常用的元素之一，它可以讓用戶通過點(diǎn)擊左右兩個(gè)小箭頭來切換不同的內(nèi)容區(qū)塊，從而提高網(wǎng)站的易用性和用戶體驗(yàn)。

.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
font-size: 18px;
color: #fff;
background-color: #333;
border-radius: 50%;
text-align: center;
line-height: 30px;
cursor: pointer;
transition: all .3s ease;
}
.arrow:hover {
background-color: #555;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}

首先我們需要定義一個(gè)類名為.arrow的樣式，設(shè)置其為相對定位（position: absolute），使得它們可以在父元素中水平居中后再垂直居中（top: 50%; transform: translateY(-50%)）。然后設(shè)置其寬高為30px、字體大小為18px、顏色為白色、背景顏色為深灰色、圓角為50%、文本水平居中、垂直居中并且有一個(gè)可點(diǎn)擊的鼠標(biāo)指針（cursor: pointer）。最后加上一個(gè)過渡效果，讓鼠標(biāo)懸停時(shí)能夠呈現(xiàn)出更加友好的效果。 接下來我們通過添加:left和:right類名來分別定義左箭頭和右箭頭的樣式。通過設(shè)置左箭頭的left屬性和右箭頭的right屬性分別為10px，讓它們分別位于父元素的左右兩側(cè)。 最后，我們只需要在HTML中添加這兩個(gè)箭頭的代碼并且配合一些JavaScript代碼來實(shí)現(xiàn)切換功能。這樣，我們就成功實(shí)現(xiàn)了CSS左右小箭頭按鈕的樣式效果。