Modern Pagination Component

Pagination doesn’t have to be complex. In this snippet, I’ve designed a modern, clean pagination UI using only HTML and CSS — perfect for web apps, blogs, or dashboards.

No JavaScript. No frameworks. Just copy, paste, and go.

🎯 Features

  • ✅ Pure HTML & CSS
  • ✅ Clean, modern UI
  • ✅ Responsive by design
  • ✅ Easily customizable

🔍 Preview

👉 Live demo + full code:

https://designyff.com/codes/modern-pagination/

🧩 HTML Structure 

class="pagination">
   href="#">«
   href="#">1
   href="#" class="active">2
   href="#">3
   href="#">»

🎨 CSS Styling 

.pagination {
  display: flex;
  gap: 8px;
  padding: 12px;
}

.pagination a {
  padding: 8px 12px;
  border: 1px solid #ccc;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s;
}

.pagination a.active {
  background: #333;
  color: #fff;
}

.pagination a:hover:not(.active) {
  background: #eee;
}

🛠️ Use Cases

  • Blogs & content-heavy websites
  • Admin dashboards
  • E-commerce product lists
  • Web apps or SPAs

✏️ Customization Tips

  • Change border-radius for sharp or pill-like buttons.
  • Add aria-label for accessibility.
  • Replace numbers with icons or page ranges

🚀 Ready to Use

Head over to the full post on my site for a live preview and source files:
👉 Modern Pagination – Designyff

Feel free to adapt this into your next frontend project!

Thanks for reading — follow me for more frontend UI components like this!