CSS Pagination

Pagination means breaking up a long list or content into smaller chunks, shown page-by-page—like pages of a book .

You’ve seen it on websites like:

• Google search results (page 1, 2, 3...),
• Blog posts (next/previous),
• E-commerce sites (product listings with 1, 2, 3...).

So instead of loading 100 items at once (slow & messy), you show 10 items per page and let users navigate with pagination buttons.

Why Use CSS Pagination?

• Makes long content easier to manage and faster to load
• Gives a clean look and better user experience
• Helpful when displaying search results, posts, images, products, etc.
• You don’t always need JavaScript or big libraries—HTML + CSS is enough to create good-looking pagination!

Simple HTML Structure for Pagination

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

Here:

• « means "Previous"
• » means "Next"
• The .active class highlights the current page

Simple CSS Styling for Pagination

.pagination {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
  margin: 0 4px;
  transition: background-color 0.3s;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
}

Example in action:

Output: A neat row of numbered buttons that users can click to jump between pages.

Advanced CSS Pagination Styles (Rounded, Gradient, etc.)

Want to make your pagination look like modern websites? Let’s spice it up with gradients and rounded corners:

.pagination a {
  background: linear-gradient(to right, #6a11cb, #2575fc);
  color: white;
  border-radius: 20px;
  padding: 10px 18px;
  margin: 0 5px;
  font-weight: bold;
  transition: transform 0.2s ease;
}

.pagination a:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

Example in action:

Looks super professional, and you’ve only used CSS!

Responsive Pagination with Flexbox

If you want your pagination to work on mobile and tablets too:

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

Example in action (try resizing your browser):

📱 Now it wraps on small screens—great for mobile UI/UX.

Different Types of Pagination Designs

Here are a few styles you can try:

Dot-style Pagination (like image sliders)

HTML (relevant part)

<div class="dots">
  <span class="dot active"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

CSS (relevant part)

.dots .dot {
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background 0.3s ease;
}
.dots .dot.active, .dot:hover {
  background-color: #717171;
}

Example in action:

Real-Life Use Case for mkcoder.com

Let’s say you’re building a blog section on your website mkcoder.com. You want to show only 5 posts per page.

You’d add this HTML at the bottom of your blog list:

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

And the user can jump between blog pages easily!

You will be able to add dynamic pagination later using JavaScript or PHP - but right now this CSS pagination style is ideal for your static content.

Extra Tips for Beginners

• Always highlight the current page
• Keep spacing uniform between buttons
• Use good contrast (text vs background)
• Test on both desktop and mobile
• Don't add too many page numbers—use "..." if there are many pages
• Add accessibility (aria-label) if needed

Pagination vs Infinite Scroll

Best for beginners? Start with pagination. Infinite scroll is trendy, but not ideal for every case.

Final Words from Your Bhai

CSS Pagination is one of those small but powerful pieces that can really improve the user experience of your website, blog or project Once you master it, you'll be able to build cleaner, faster, and more elegant sites.

You don't need super big libraries or manual JS magic, just plain simple HTML & CSS, served with love.

And don’t forget, you can practice and showcase your projects on your portfolio at

mkcoder.com — let the world see your coding glow!