CSS Pagination - Detailed Overview

Introduction to CSS Pagination

Pagination is a technique used to divide a large amount of content into smaller, manageable chunks. CSS can be used to style pagination controls to make them more visually appealing and user-friendly. This can include styling the links, adding hover effects, and indicating the active page.

Examples of CSS Pagination

Basic Pagination

This example demonstrates a basic pagination setup. The pagination consists of navigation links for different pages, with special styles for the active page and disabled state for the previous and next buttons when they are not applicable.

CSS used:


.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination a {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 5px;
    font-size: 16px;
    color: #007BFF;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 5px;
}

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

.pagination .active {
    background-color: #007BFF;
    color: #fff;
    border-color: #007BFF;
}

.pagination .disabled {
    color: #ccc;
    pointer-events: none;
    border-color: #ddd;
}
                    
<ul class="pagination">
    <li><a href="#" class="disabled">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#" class="active">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#" class="disabled">»</a></li>
</ul>

Styled Pagination with Hover Effect

This example showcases pagination with a hover effect applied to the pagination links. When you hover over a link, the background color changes to provide visual feedback to the user. The active page is highlighted to distinguish it from other pages.

CSS used:


.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination a {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 5px;
    font-size: 16px;
    color: #007BFF;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 5px;
}

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

.pagination .active {
    background-color: #007BFF;
    color: #fff;
    border-color: #007BFF;
}

.pagination .disabled {
    color: #ccc;
    pointer-events: none;
    border-color: #ddd;
}
                    
<ul class="pagination">
    <li><a href="#" class="disabled">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#" class="active">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#" class="disabled">»</a></li>
</ul>