翻頁(yè)按鈕是網(wǎng)頁(yè)設(shè)計(jì)中常用的重要組件之一。通過(guò)添加合適的CSS樣式可以讓翻頁(yè)按鈕更加美觀、易于使用。下面介紹幾種常見(jiàn)的翻頁(yè)按鈕CSS樣式。

/*1.基本樣式*/
.page {
display: inline-block;
padding: 4px 8px;
font-size: 14px;
font-weight: bold;
color: #333;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
/*2.鼠標(biāo)懸停樣式*/
.page:hover {
color: #fff;
background-color: #4582ec;
border-color: #4582ec;
}
/*3.當(dāng)前頁(yè)樣式*/
.page.active {
color: #fff;
background-color: #4582ec;
border-color: #4582ec;
cursor: default;
}
/*4.禁用樣式*/
.page.disabled {
color: #999;
background-color: #eee;
border-color: #ccc;
cursor: not-allowed;
}

以上是常見(jiàn)的翻頁(yè)按鈕樣式代碼，根據(jù)實(shí)際情況可進(jìn)行適當(dāng)?shù)男薷恼{(diào)整。在使用時(shí)，可以結(jié)合JavaScript實(shí)現(xiàn)翻頁(yè)功能，讓按鈕呈現(xiàn)良好的用戶體驗(yàn)。