
Accordion with Expand/Collapse Status Icon
January 27, 2025
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.