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

// 分頁按鈕樣式
.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;
}

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

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

最后，我們為按鈕的狀態（懸停、禁用或激活）添加了樣式。我們為懸停狀態設置了背景顏色，使按鈕在鼠標懸停時變得更加明顯。disabled 狀態的按鈕將看起來稍微暗淡，使其不能被點擊。而激活狀態的按鈕采用了反向顏色，以便用戶知道當前選中了哪個按鈕。

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