CSS Pagination là một thành phần quan trọng giúp chia nhỏ nội dung thành nhiều trang, hỗ trợ người dùng duyệt nội dung dễ dàng và giúp giao diện trở nên gọn gàng hơn. CSS Pagination thường xuất hiện trong các trang web có nhiều mục như blog, danh sách sản phẩm, kết quả tìm kiếm. Với CSS, bạn có thể tùy chỉnh kiểu dáng phân trang để phù hợp với phong cách thiết kế của trang web, bao gồm các hiệu ứng khi di chuột, màu sắc và các tùy chọn phong phú khác.

Bài viết này là một phần của chuỗi học CSS trên "codetuthub.com", với các chủ đề liên quan như CSS Buttons, CSS Flexbox, và CSS Grid.

1. Tạo phân trang cơ bản với CSS

Pagination cơ bản sẽ bao gồm các số trang, nút "Previous" và "Next". Bạn có thể sử dụng CSS để định dạng các nút này và giúp chúng dễ nhìn hơn.

HTML cấu trúc cơ bản

html
Thử online
<div class="pagination">
    <a href="#">&laquo; Previous</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">Next &raquo;</a>
</div>

CSS phân trang cơ bản

css
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px;
}

.pagination a {
    padding: 8px 16px;
    text-decoration: none;
    color: #3498db;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.pagination a:hover {
    background-color: #3498db;
    color: white;
}

Trong ví dụ này:

  • display: flex và justify-content: center giúp căn giữa các nút.
  • padding và border-radius tạo khoảng cách và làm mềm mại cho các nút phân trang.

2. Phân trang với nút hiển thị trang hiện tại

Để giúp người dùng biết trang hiện tại đang ở đâu, bạn có thể thêm một class cho trang đang hoạt động và làm nổi bật nó.

HTML thêm class "active"

html
Thử online
<div class="pagination">
    <a href="#">&laquo; Previous</a>
    <a href="#">1</a>
    <a href="#" class="active">2</a>
    <a href="#">3</a>
    <a href="#">Next &raquo;</a>
</div>

CSS làm nổi bật trang hiện tại

css
.pagination a.active {
    background-color: #3498db;
    color: white;
    border: 1px solid #3498db;
}

Trong ví dụ này, a.active thay đổi màu nền và màu chữ của trang hiện tại, giúp phân biệt nó với các trang khác.

3. Phân trang có hiệu ứng hover nâng cao

Sử dụng CSS transform và transition để tạo hiệu ứng mượt mà khi người dùng di chuột qua các nút phân trang.

CSS với hiệu ứng hover

css
.pagination a {
    padding: 8px 16px;
    text-decoration: none;
    color: #3498db;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: transform 0.2s ease;
}

.pagination a:hover {
    background-color: #3498db;
    color: white;
    transform: scale(1.1);
}

Ở đây, transform: scale(1.1) sẽ phóng to nút một chút khi di chuột qua, làm cho nút trông nổi bật và thu hút hơn.

4. Phân trang với biểu tượng mũi tên

Sử dụng biểu tượng mũi tên cho nút "Previous" và "Next" giúp người dùng dễ nhận diện hướng di chuyển trong phân trang.

HTML với biểu tượng mũi tên

html
Thử online
<div class="pagination">
    <a href="#"><span>&laquo;</span> Previous</a>
    <a href="#">1</a>
    <a href="#" class="active">2</a>
    <a href="#">3</a>
    <a href="#">Next <span>&raquo;</span></a>
</div>

CSS tùy chỉnh cho biểu tượng mũi tên

css
.pagination a {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    text-decoration: none;
    color: #3498db;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.pagination a span {
    margin: 0 5px;
}

Ở đây, display: flex và align-items: center giúp canh giữa biểu tượng mũi tên và văn bản.

5. Phân trang responsive

Để phân trang hiển thị tốt trên các thiết bị di động, bạn có thể sử dụng CSS Media Queries để điều chỉnh cách hiển thị của phân trang trên các màn hình nhỏ.

CSS responsive cho phân trang

css
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    padding: 20px;
}

.pagination a {
    padding: 8px 12px;
    font-size: 14px;
}

@media (max-width: 600px) {
    .pagination a {
        padding: 6px 10px;
        font-size: 12px;
    }
}

Trong ví dụ này:

  • flex-wrap: wrap giúp phân trang tự động xuống dòng nếu không đủ không gian.
  • Media query @media (max-width: 600px) điều chỉnh kích thước nút và khoảng cách cho màn hình nhỏ.

6. Phân trang với hiệu ứng động sử dụng CSS Animations

Bạn có thể thêm CSS Animations để tạo hiệu ứng cho nút phân trang khi người dùng tương tác với chúng, giúp phân trang thêm sinh động.

CSS với hiệu ứng nhấp nháy

css
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.pagination a:hover {
    animation: bounce 0.3s ease-in-out;
}

Trong ví dụ này, khi di chuột qua các nút phân trang, nút sẽ nhấp nháy nhẹ, tạo hiệu ứng tương tác vui mắt.

7. Phân trang theo kiểu nút bấm (Button-style Pagination)

Nếu bạn muốn các nút phân trang trông giống các nút bấm hơn, bạn có thể sử dụng thêm các thuộc tính CSS như background-color, padding, và border-radius để tạo kiểu.

Ví dụ kiểu nút bấm

css
.pagination {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 20px;
}

.pagination a {
    padding: 10px 20px;
    text-decoration: none;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 20px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.pagination a:hover {
    background-color: #2980b9;
}

Ở đây, nút phân trang trông giống như các nút bấm hơn, với background-color và border-radius được tùy chỉnh.

8. Kết luận

CSS Pagination giúp cải thiện trải nghiệm người dùng và làm cho trang web của bạn dễ điều hướng hơn. Bằng cách tùy chỉnh CSS cho các nút phân trang, bạn có thể tạo ra các kiểu phân trang độc đáo và thu hút, giúp trang web của bạn trông chuyên nghiệp và thân thiện. Để học thêm các kỹ thuật CSS nâng cao, bạn có thể xem thêm các bài học khác trên "codetuthub.com" như CSS Flexbox, CSS Grid, và CSS Animations.