Accordion with Expand/Collapse Status Icon
Accordion with Expand/Collapse Status Icon
January 27, 2025

February 3, 2025

CSS Pagination with Next/Prev Buttons and Dots

Pagination is an element that helps you navigate through the content of a website. This snippet combines navigation buttons with page numbers so you can easily see which page you’re on.

Advantages:

  • Intuitive Navigation: “Prev” takes you to the previous page, “Next” to the next page.
  • Visual Orientation: Page numbers show which page is active.
  • Responsive: Looks great on desktop and mobile.

HTML Structure

<ul class="sf-pagination">
    <li><a href="#" class="page-button prev"><i class="fas fa-chevron-left"></i> Previous</a></li>
    <li><a href="#" class="page-number">1</a></li>
    <li><a href="#" class="page-number">2</a></li>
    <li><a href="#" class="page-number is-active">3</a></li>
    <li><a href="#" class="page-number">4</a></li>
    <li><span class="dots">...</span></li>
    <li><a href="#" class="page-num">5</a></li>
    <li><a href="#" class="page-button next">Next <i class="fas fa-chevron-right"></i></a></li>
</ul>

Styling the Pagination

/* ---------------------- */
/*  Snippflow Pagination  */
/* ---------------------- */

.sf-pagination {
    --sf-pagination-font-size: 14px;
    --sf-pagination-color: #172029;
    --sf-pagination-border-radius: 4px;
    --sf-pagination-gap: 4px;
    --sf-pagination-arrows-bg: #fff;
    --sf-pagination-arrows-border: #e7e8ea;
    --sf-pagination-arrows-shadow: 0px 0px 8px 0px rgba(0,0,0,.06);
    --sf-pagination-hover-bg: rgba(0,0,0,.05);
    --sf-pagination-hover-arrows-border: #24A47B;
    --sf-pagination-active-bg: #24A47B;
    --sf-pagination-active-color: #fff;
}
.sf-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--sf-pagination-gap); padding: 0; margin: 0; list-style: none; }
.sf-pagination a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 17px; border-radius: var(--sf-pagination-border-radius); text-decoration: none; color: var(--sf-pagination-color); font-size: var(--sf-pagination-font-size); transition: all 0.3s ease-in-out; }
.sf-pagination a:hover { background-color: var(--sf-pagination-hover-bg); }
.sf-pagination a.is-active { background-color: var(--sf-pagination-active-bg); color: var(--sf-pagination-active-color); pointer-events: none; }
.sf-pagination a.page-button { background-color: var(--sf-pagination-arrows-bg); border: 1px solid var(--sf-pagination-arrows-border); box-shadow: var(--sf-pagination-arrows-shadow); }
.sf-pagination a:hover.page-button { border-color: var(--sf-pagination-hover-arrows-border); color: var(--sf-pagination-hover-arrows-border); }
.sf-pagination .dots { padding: 10px; opacity: .5; }

Result

See the Pen Pagination with Next/Prev Buttons and Dots by Snippflow (@snippflow) on CodePen.

See also

Summary

Using “Prev/Next” buttons and page numbers is a practical and clean solution that improves navigation and looks. Responsive CSS makes it user friendly on any device and the active page is highlighted so you can easily find your way through the content.

Leave a Reply

Your email address will not be published. Required fields are marked *

Level Up Your Coding Skills

Get the best CSS, HTML, and JS snippets delivered to your inbox monthly. 🚀
No spam—just coding gold! 💻✨"

We don’t spam! Read our privacy policy for more info.

cookie
This website uses cookies to improve your experience. By using this website you agree to our Data Protection Policy.
Read more