CSS Responsive Pagination Examples with Source Code

Pagination is a crucial component for dividing content into multiple pages, enhancing both user experience and SEO. In this guide, we will explore responsive CSS pagination examples with source code that you can copy and use on your website.

This example showcases a preview-only style. To view the source code or edit and try it yourself, click the respective buttons below.

What is Pagination?

Pagination is a web design technique used to divide large amounts of content, such as articles, search results, or product listings, into smaller, manageable pages. It provides an easy way for users to navigate through content without overwhelming them with too much information at once.

Why Use Pagination?

  1. Improves User Experience: Breaking content into pages makes it easier to navigate and enhances readability.
  2. Enhances Performance: Loading a limited number of items per page reduces server load and improves page speed.
  3. SEO Benefits: Pagination helps search engines crawl and index content efficiently, leading to better rankings.
  4. Clean Design: Keeps your website clean, organized, and user-friendly.

Where is Pagination Used?

Pagination is commonly used in:

  • Blog Posts: Dividing posts into multiple pages.
  • Search Results: Showing search results page by page.
  • E-commerce Sites: Displaying product listings.
  • Data Tables: Organizing large sets of data.

For example, when you see a set of numbered links at the bottom of a webpage like 1, 2, 3, 4, ... Next, that's pagination in action.

1. Active and Hoverable Pagination

Active number and Hover style white color buttons pagination

Loading...
View source code
Download Code Try it Yourself
HTML
<div class="pagination">
	<a href="#" title="first page"><svg fill="currentColor"><path d="M17.59 18L19 16.59 14.42 12 19 7.41 17.59 6l-6 6zM11 18l1.41-1.41L7.83 12l4.58-4.59L11 6l-6 6z"/></svg> First</a>
	<a href="#" title="previous page"><svg fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></a>
	<a href="#">1</a>
	<a href="#" class="page-active">2</a>
	<a href="#">3</a>
	<span class="page-dots">...</span>
	<a href="#">6</a>
	<a href="#" title="next page"><svg fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></a>
	<a href="#" title="last page">Last <svg fill="currentColor"><path d="M6.41 6L5 7.41 9.58 12 5 16.59 6.41 18l6-6zM13 6l-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6z"/></svg></a>
</div>
CSS
body {
	background-color: #eee;
}
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.pagination > a,
.pagination > span {
	background-color: #fff;
	color: #999;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	margin: 0 5px 8px;
	border-radius: 5px;
	min-width: 20px;
	padding: 0 10px;
	height: 40px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	text-decoration: none;
	position: relative;
	font-family: Helvetica, Arial, sans-serif;
}
.pagination > span {
	pointer-events: none;
}
.pagination svg {
	height: 24px;
	width: 24px;
}
.pagination > a.page-active {
	background-color: #f00;
	color: #fff;
}
.pagination > a:hover {
	background-color: #f00;
	color: #fff;
}

2. Square Pagination

Square button Pagination

Loading...
View source code
Download Code Try it Yourself
HTML
<div class="pagination">
	<a href="#" title="first page">First</a>
	<a href="#" title="previous page">Previous</a>
	<a href="#">1</a>
	<a href="#" class="page-active">2</a>
	<a href="#">3</a>
	<span class="page-dots">...</span>
	<a href="#">6</a>
	<a href="#" title="next page">Next</a>
	<a href="#" title="last page">Last</a>
</div>
CSS
body {
	background-color: #fff;
}
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.pagination > a,
.pagination > span {
	background-color: #fff;
	color: #636363;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 17px;
	margin: 0 3px 5px;
	min-width: 20px;
	padding: 0 10px;
	height: 40px;
	border: solid 1px #b9b9b9;
	text-decoration: none;
	position: relative;
	font-family: Helvetica, Arial, sans-serif;
}
.pagination > span {
	pointer-events: none;
}
.pagination svg {
	height: 24px;
	width: 24px;
}
.pagination > a:hover {
	background-color: #eee;
}
.pagination > a.page-active {
	background-color: #ffe075;
	color: #4a4a4a;
}

3. Simple Pagination

Simple Pagination green hover color

Loading...
View source code
Download Code Try it Yourself
HTML
<div class="pagination">
	<a href="#" title="previous page">Previous</a>
	<a href="#">1</a>
	<a href="#" class="page-active">2</a>
	<a href="#">3</a>
	<span class="page-dots">...</span>
	<a href="#">6</a>
	<a href="#" title="next page">Next</a>
</div>
CSS
body {
	background-color: #fff;
}
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.pagination > a, .pagination > span {
	background-color: #fff;
	color: #636363;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 17px;
	margin: 0 3px 5px;
	min-width: 20px;
	height: 40px;
	text-decoration: none;
	position: relative;
	font-family: Helvetica, Arial, sans-serif;
	padding: 1px 10px;
}
.pagination > span {
	pointer-events: none;
}
.pagination svg {
	height: 24px;
	width: 24px;
}
.pagination > a:hover {
	background-color: #3da914;
	color: #fff;
}
.pagination > a.page-active {
	background-color: #3da914;
	color: #fff;
}
.pagination > a:first-child {
	border-radius: 10px 0 0 10px;
}
.pagination > a:last-child {
	border-radius: 0 10px 10px 0;
}

4. Rounded Corner Pagination

Each buttons rounded corner pagination

Loading...
View source code
Download Code Try it Yourself
HTML
<div class="pagination">
	<a href="#" title="first page"><svg fill="currentColor"><path d="M17.59 18L19 16.59 14.42 12 19 7.41 17.59 6l-6 6zM11 18l1.41-1.41L7.83 12l4.58-4.59L11 6l-6 6z"/></svg></a>
	<a href="#" title="previous page"><svg fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></a>
	<a href="#">1</a>
	<a href="#" class="page-active">2</a>
	<a href="#">3</a>
	<span class="page-dots">...</span>
	<a href="#">6</a>
	<a href="#" title="next page"><svg fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></a>
	<a href="#" title="last page"><svg fill="currentColor"><path d="M6.41 6L5 7.41 9.58 12 5 16.59 6.41 18l6-6zM13 6l-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6z"/></svg></a>
</div>
CSS
body {
	background-color: #fff;
}
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.pagination > a,
.pagination > span {
	background-color: #ddd;
	color: #636363;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	font-size: 17px;
	margin: 0 3px 5px;
	width: 40px;
	height: 40px;
	text-decoration: none;
	position: relative;
	font-family: Helvetica, Arial, sans-serif;
}
.pagination > span {
	pointer-events: none;
}
.pagination svg {
	height: 24px;
	width: 24px;
}
.pagination > a:hover {
	background-color: #0091ff;
	color: #fff;
}
.pagination > a.page-active {
	background-color: #0091ff;
	color: #fff;
}

5. Rounded Border

Rounded border pagination

Loading...
View source code
Download Code Try it Yourself
HTML
<div class="pagination">
	<a href="#" title="first page">First</a>
	<a href="#" title="previous page"><svg fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></a>
	<a href="#">1</a>
	<a href="#" class="page-active">2</a>
	<a href="#">3</a>
	<span class="page-dots">...</span>
	<a href="#">6</a>
	<a href="#" title="next page"><svg fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></a>
	<a href="#" title="last page">Last</a>
</div>
CSS
body {
	background-color: #fff;
}
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.pagination > a,
.pagination > span {
	background-color: #fff;
	color: #06c;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 17px;
	margin: 0 -1px 5px;
	min-width: 20px;
	padding: 0 10px;
	height: 40px;
	text-decoration: none;
	border: solid 1px #ddd;
	position: relative;
	font-family: Helvetica, Arial, sans-serif;
}
.pagination > span {
	pointer-events: none;
}
.pagination svg {
	height: 24px;
	width: 24px;
}
.pagination > a:hover {
	background-color: #f7f7f7;
}
.pagination > a.page-active {
	background-color: #07639d;
	color: #fff;
	border: solid 1px #07639d;
}
.pagination > a:first-child {
	border-radius: 5px 0 0 5px;
}
.pagination > a:last-child {
	border-radius: 0 5px 5px 0;
}

6. Gradient Color Pagination

White color gradient color pagination

Loading...
View source code
Download Code Try it Yourself
HTML
<div class="pagination">
	<a href="#" title="first page"><svg fill="currentColor"><path d="M17.59 18L19 16.59 14.42 12 19 7.41 17.59 6l-6 6zM11 18l1.41-1.41L7.83 12l4.58-4.59L11 6l-6 6z"/></svg></a>
	<a href="#" title="previous page"><svg fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></a>
	<a href="#">1</a>
	<a href="#" class="page-active">2</a>
	<a href="#">3</a>
	<span class="page-dots">...</span>
	<a href="#">6</a>
	<a href="#" title="next page"><svg fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></a>
	<a href="#" title="last page"><svg fill="currentColor"><path d="M6.41 6L5 7.41 9.58 12 5 16.59 6.41 18l6-6zM13 6l-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6z"/></svg></a>
</div>
CSS
body {
	background-color: #fff;
}
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.pagination > a,
.pagination > span {
	background: linear-gradient(to bottom, #FAFAFA, #E7E7E7);
	color: #636363;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 17px;
	margin: 0 -1px 5px;
	width: 40px;
	height: 40px;
	text-decoration: none;
	border: solid 1px #ccc;
	position: relative;
	font-family: Helvetica, Arial, sans-serif;
}
.pagination > span {
	pointer-events: none;
}
.pagination svg {
	height: 24px;
	width: 24px;
}
.pagination > a.page-active {
	background: linear-gradient(to bottom, #bcbcbc, #dcdcdc);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}
.pagination > a:active {
	background: linear-gradient(to bottom, #bcbcbc, #dcdcdc);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
	outline: none;
}

Pagination Style 7

Blue color background pagination style

Loading...
View source code
Download Code Try it Yourself
HTML
<div class="pagination">
	<a href="#" title="previous page"><svg fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg> Previous</a>
	<a href="#">1</a>
	<a href="#" class="page-active">2</a>
	<a href="#">3</a>
	<span class="page-dots">...</span>
	<a href="#">6</a>
	<a href="#" title="next page">Next <svg fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></a>
</div>
CSS
body {
	background-color: #fff;
}
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.pagination > a,
.pagination > span {
	background: #1fadc3;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 17px;
	margin: 0 -1px 5px;
	min-width: 20px;
	padding: 0 10px;
	height: 40px;
	text-decoration: none;
	border: 1px solid rgba(0, 0, 0, 0.25);
	position: relative;
	font-family: Helvetica, Arial, sans-serif;
	box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.35);
}
.pagination > span {
	pointer-events: none;
}
.pagination svg {
	height: 24px;
	width: 24px;
}
.pagination > a.page-active {
	background: #328e9c;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}
.pagination > a:hover {
	background: #328e9c;
}
.pagination > a:first-child {
	border-radius: 20px 0 0 20px;
}
.pagination > a:last-child {
	border-radius: 0 20px 20px 0;
}

Pagination style 8

White color background pagination style

Loading...
View source code
Download Code Try it Yourself
HTML
<div class="pagination">
	<a href="#" title="previous page"><svg fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></a>
	<a href="#">1</a>
	<a href="#" class="page-active">2</a>
	<a href="#">3</a><a href="#">4</a>
	<a href="#">5</a>

	<span class="page-dots">...</span>
	<a href="#">8</a>
	<a href="#" title="next page"><svg fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></a>
</div>
CSS
body {
	background-color: #ddd;
}
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	background-color: #ffffff;
	border-radius: 5px;
	padding-top: 5px;
}
.pagination > a,
.pagination > span {
	color: #383838;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 17px;
	margin: 0 2px 5px;
	min-width: 20px;
	padding: 0 10px;
	height: 40px;
	text-decoration: none;
	position: relative;
	border-radius: 5px;
	font-family: Helvetica, Arial, sans-serif;
}
.pagination > span {
	pointer-events: none;
}
.pagination svg {
	height: 24px;
	width: 24px;
}
.pagination > a.page-active {
	background: #2ea4b5;
	color: #fff;
}
.pagination > a:hover {
	background: #2ea4b5;
	color: #fff;
}