分頁按鈕樣式是網(wǎng)站設(shè)計(jì)中非常重要的一部分，它可以使用戶更輕松、更愉快地訪問網(wǎng)站的不同頁面。在這篇文章中，我們將介紹如何使用 CSS 樣式來創(chuàng)建漂亮、自定義的分頁按鈕樣式。

// 分頁按鈕樣式
.pagination {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.pagination li {
margin: 0 5px;
}
.pagination a {
display: flex;
justify-content: center;
align-items: center;
color: #333;
text-decoration: none;
border: 1px solid #ddd;
border-radius: 3px;
padding: 5px 10px;
width: 30px;
height: 30px;
transition: all 0.2s ease-in-out;
}
.pagination a:hover {
background-color: #f3f3f3;
}
.pagination .active a {
background-color: #333;
color: #fff;
}
.pagination .disabled a {
opacity: 0.5;
pointer-events: none;
}

首先，我們使用一個(gè)容器元素（類名為“pagination”）來包含分頁按鈕。我們將該容器設(shè)置為 flex 容器，這樣按鈕將自動(dòng)排列并居中對(duì)齊。

然后，我們?yōu)槊總€(gè)分頁按鈕添加樣式，將它們?cè)O(shè)置為兩個(gè)彈性容器，通過 justify-content 和 align-items 屬性來居中按鈕中的內(nèi)容。我們將每個(gè)按鈕的寬度和高度設(shè)置為 30px，在該按鈕的范圍內(nèi)設(shè)置了邊框和邊框半徑，使它們看起來更美觀，而且添加了過渡效果，這可以為用戶提供良好的用戶體驗(yàn)。

最后，我們?yōu)榘粹o的狀態(tài)（懸停、禁用或激活）添加了樣式。我們?yōu)閼彝顟B(tài)設(shè)置了背景顏色，使按鈕在鼠標(biāo)懸停時(shí)變得更加明顯。disabled 狀態(tài)的按鈕將看起來稍微暗淡，使其不能被點(diǎn)擊。而激活狀態(tài)的按鈕采用了反向顏色，以便用戶知道當(dāng)前選中了哪個(gè)按鈕。

使用上述 CSS 樣式，您可以創(chuàng)建漂亮的分頁按鈕樣式，為用戶提供更好、更人性化的瀏覽體驗(yàn)。