CSS Pagination Examples

Pagination is an essential part of web navigation, particularly for websites with a lot of content, such as blogs, e-commerce platforms, and search results. CSS allows you to style pagination components to make them visually appealing and user-friendly. Below, we’ll explore various CSS pagination examples, ranging from simple designs to advanced responsive layouts.

Why is Pagination Important?

  1. Improves Navigation: Allows users to access content in a structured manner.
  2. Enhances User Experience: Breaks content into manageable chunks for better readability.
  3. SEO Benefits: Pagination helps search engines understand your site’s structure.

Basic Pagination

A simple pagination setup with numbered buttons.

HTML:

<div class="pagination">
    <a href="#">«</a>
    <a href="#">1</a>
    <a href="#" class="active">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">»</a>
</div>

CSS:

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

.pagination a {
    margin: 0 5px;
    padding: 10px 15px;
    text-decoration: none;
    color: #007bff;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.pagination a:hover {
    background-color: #007bff;
    color: white;
}

.pagination a.active {
    background-color: #007bff;
    color: white;
    pointer-events: none;
}

Pagination with Dots

Use ellipses to indicate skipped pages.

HTML:

<div class="pagination">
    <a href="#">«</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <span>...</span>
    <a href="#">10</a>
    <a href="#">»</a>
</div>

CSS:

.pagination span {
    padding: 10px;
    color: #6c757d;
}
  • Result: Adds a “…” between distant page numbers.

Rounded Pagination

Make the buttons fully rounded for a modern look.

CSS:

.pagination a {
    border-radius: 50%;
}

Pagination with Icons

Use icons instead of text for navigation.

HTML:

<div class="pagination">
    <a href="#"><span>«</span> Previous</a>
    <a href="#" class="active">1</a>
    <a href="#">2</a>
    <a href="#">Next <span>»</span></a>
</div>

CSS:

.pagination a {
    display: flex;
    align-items: center;
    padding: 10px 20px;
}

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

Responsive Pagination

Pagination that adapts to different screen sizes using media queries.

CSS:

.pagination {
    flex-wrap: wrap;
}

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

Animated Pagination

Add smooth transitions to pagination buttons.

CSS:

.pagination a {
    position: relative;
    overflow: hidden;
}

.pagination a:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #007bff;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.pagination a:hover {
    color: white;
}

.pagination a:hover::after {
    transform: scaleX(1);
}

Pagination with Disabled States

Indicate when a button is inactive, like on the first or last page.

HTML:

<div class="pagination">
    <a href="#" class="disabled">« Previous</a>
    <a href="#" class="active">1</a>
    <a href="#">2</a>
    <a href="#">Next »</a>
</div>

CSS:

.pagination a.disabled {
    color: #ccc;
    cursor: not-allowed;
}

Advanced Pagination with Flexbox

Align pagination elements dynamically with justify-content.

CSS:

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination a {
    padding: 10px;
}

Conclusion

Pagination is a key component of any well-designed website, and CSS gives you the flexibility to create visually appealing, user-friendly navigation. Whether you opt for simple, modern, or advanced styles, you can enhance usability and functionality for your users.

For more web design tips, check out The Coding College—your ultimate guide to mastering front-end development!

Leave a Comment