Home >>CSS Tutorial >CSS Pagination

CSS Pagination

CSS Pagination

The CSS pagination is used to dividing the documents into pages and you have to add some sort of pagination to each page. If you have a website with lots of pages, it is very useful technique for indexing different pages of a website on the homepage.

Types of Pagination

These are the types of the pagination:

  1. Simple Pagination
  2. Bordered Pagination
  3. Active and Hoverable Pagination
  4. Rounded Border Pagination
  5. Rounded Active and Hoverable Buttons
  6. Hoverable Transition Effect
  7. Space between Pagination
  8. Centered Pagination
  9. Pagination Size

Simple pagination

Let's take an example of simple pagination:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.pagination { 
	display: inline-block; 
} 
.pagination a { 
	font-weight:bold; 
	font-size:20px; 
	color: black; 
	float: left; 
	padding: 8px 16px; 
	text-decoration: none; 
} 
.php { 
	font-size:42px; 
	font-weight:bold; 
	color:orange; 
	margin-left:140px; 
	margin-bottom:60px; 
} 
.pagi { 
	font-size:24px; 
	font-weight:bold; 
	margin-left:140px; 
} 
</style> 
</head> 
<body> 
<div class = "php">phptpoint</div> 
<div class = "pagi">Simple Pagination</div> 
<div class="pagination"> 
<a href="#">«</a> 
<a href="#">1</a> 
<a href="#">2</a> 
<a href="#">3</a> 
<a href="#">4</a> 
<a href="#">5</a> 
<a href="#">6</a> 
<a href="#">7</a> 
<a href="#">8</a> 
<a href="#">9</a> 
<a href="#">10</a> 
<a href="#">»</a> 
</div> 
</body> 
</html>
Output:
phptpoint
Simple Pagination

Bordered pagination

Let's take an example of bordered pagination:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.pagination { 
	display: inline-block; 
} 
.pagination a { 
	font-weight:bold; 
	font-size:20px; 
	color: black; 
	float: left; 
	padding: 8px 16px; 
	text-decoration: none; 
	border:1px solid black; 
} 
.pagination a.active { 
	background-color:#009900; 
} 
.pagination a:hover:not(.active) { 
	background-color: #d4d5d2; 
} 
.php { 
	font-size:42px; 
	font-weight:bold; 
	color:orange; 
	margin-left:100px; 
	margin-bottom:60px; 
} 
.pagi { 
	font-size:24px; 
	font-weight:bold; 
	margin-left:140px; 
	margin-bottom:20px; 
} 
</style> 
</head> 
<body> 
<div class = "php">phptpoint</div> 
<div class = "pagi">Bordered Pagination</div> 
<div class="pagination"> 
<a href="#">«</a> 
<a href="#">1</a> 
<a href="#">2</a> 
<a href="#">3</a> 
<a href="#">4</a> 
<a class = "active" href="#">5</a> 
<a href="#">6</a> 
<a href="#">7</a> 
<a href="#">8</a> 
<a href="#">9</a> 
<a href="#">10</a> 
<a href="#">»</a> 
</div> 
</body> 
</html>
Output:
phptpoint
Bordered Pagination
« 1 2 3 4 5 6 7 8 9 10 »

Active and Hoverable Pagination

Let's take an example of Active and Hoverable Pagination:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.pagination { 
	display: inline-block; 
} 
.pagination a { 
	font-weight:bold; 
	font-size:20px; 
	color: black; 
	float: left; 
	padding: 8px 16px; 
	text-decoration: none; 
} 
.pagination a.active { 
		background-color:#f07816; 
} 
.pagination a:hover:not(.active) { 
	background-color: #d4d5d2; 
} 
.php { 
	font-size:42px; 
	font-weight:bold; 
	color:#f07816; 
	margin-left:140px; 
	margin-bottom:60px; 
} 
.pagi { 
	font-size:24px; 
	font-weight:bold; 
	margin-left:90px; 
	margin-bottom:20px; 
} 
</style> 
</head> 
<body> 
<div class = "php">Phptpoint</div> 
<div class = "pagi">Active and Hoverable Pagination</div> 
<div class="pagination"> 
<a href="#">«</a> 
<a href="#">1</a> 
<a href="#">2</a> 
<a href="#">3</a> 
<a href="#">4</a> 
<a class = "active" href="#">5</a> 
<a href="#">6</a> 
<a href="#">7</a> 
<a href="#">8</a> 
<a href="#">9</a> 
<a href="#">10</a> 
<a href="#">»</a> 
</div> 
</body> 
</html>
Output:
Phptpoint
Active and Hoverable Pagination
« 1 2 3 4 5 6 7 8 9 10 »

Rounded Border Pagination

Let's take an example of rounded border pagination:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.pagination { 
	display: inline-block; 
} 
.pagination a { 
	font-weight:bold; 
	font-size:20px; 
	color: black; 
	float: left; 
	padding: 8px 16px; 
	text-decoration: none; 
	border-radius:5px; 
	border:1px solid black; 
} 
.pagination a.active { 
	background-color:#f07816; 
} 
.pagination a:hover:not(.active) { 
	background-color: #d4d5d2; 
} 
.php { 
	font-size:42px; 
	font-weight:bold; 
	color:#f07816; 
	margin-left:140px; 
	margin-bottom:60px; 
} 
.pagi { 
	font-size:24px; 
	font-weight:bold; 
	margin-left:110px; 
	margin-bottom:20px; 
} 
</style> 
</head> 
<body> 
<div class = "php">phptpoint</div> 
<div class = "pagi">Rounded Border Pagination</div> 
<div class="pagination"> 
<a href="#">«</a> 
<a href="#">1</a> 
<a href="#">2</a> 
<a href="#">3</a> 
<a href="#">4</a> 
<a class = "active" href="#">5</a> 
<a href="#">6</a> 
<a href="#">7</a> 
<a href="#">8</a> 
<a href="#">9</a> 
<a href="#">10</a> 
<a href="#">»</a> 
</div> 
</body> 
</html>
Output:
phptpoint
Rounded Border Pagination
« 1 2 3 4 5 6 7 8 9 10 »

Rounded Active and Hoverable Buttons

Let's take an example of rounded active and hoverable buttons:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.pagination { 
	display: inline-block; 
} 
.pagination a { 
	font-weight:bold; 
	font-size:20px; 
	color: black; 
	float: left; 
	padding: 8px 16px; 
	text-decoration: none; 
} 
.pagination a.active { 
	border-radius:5px;	 
	background-color:#f07816; 
} 
.pagination a:hover:not(.active) { 
	background-color: #d4d5d2; 
	border-radius:5px; 
} 
.php { 
	font-size:42px; 
	font-weight:bold; 
	color:#f07816; 
	margin-left:140px; 
	margin-bottom:60px; 
} 
.pagi { 
	font-size:24px; 
	font-weight:bold; 
	margin-left:40px; 
	margin-bottom:20px; 
} 
</style> 
</head> 
<body> 
<div class = "php">phptpoint</div> 
<div class = "pagi">Rounded Active and Hoverable Pagination</div> 
<div class="pagination"> 
<a href="#">«</a> 
<a href="#">1</a> 
<a href="#">2</a> 
<a href="#">3</a> 
<a href="#">4</a> 
<a class = "active" href="#">5</a> 
<a href="#">6</a> 
<a href="#">7</a> 
<a href="#">8</a> 
<a href="#">9</a> 
<a href="#">10</a> 
<a href="#">»</a> 
</div> 
</body> 
</html>
Output:
phptpoint
Rounded Active and Hoverable Pagination
« 1 2 3 4 5 6 7 8 9 10 »

Hoverable Transition Effect

Let's take an example of hoverable transition effect:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.pagination { 
	display: inline-block; 
} 
.pagination a { 
	font-weight:bold; 
	font-size:20px; 
	color: black; 
	float: left; 
	padding: 8px 16px; 
	text-decoration: none; 
} 
.pagination a.active { 
	background-color:#f07816; 
} 
.pagination a:hover:not(.active) { 
	background-color: #d4d5d2; 
} 
.php { 
	font-size:42px; 
	font-weight:bold; 
	color:#f07816; 
	margin-left:140px; 
	margin-bottom:60px; 
} 
.pagi { 
	font-size:24px; 
	font-weight:bold; 
	margin-left:40px; 
	margin-bottom:20px; 
} 
</style> 
</head> 
<body> 
<div class = "php">phptpoint</div> 
<div class = "pagi">Hoverable Transition Effect Pagination</div> 
<div class="pagination"> 
<a href="#">«</a> 
<a href="#">1</a> 
<a href="#">2</a> 
<a href="#">3</a> 
<a href="#">4</a> 
<a class = "active" href="#">5</a> 
<a href="#">6</a> 
<a href="#">7</a> 
<a href="#">8</a> 
<a href="#">9</a> 
<a href="#">10</a> 
<a href="#">»</a> 
</div> 
</body> 
</html>
Output:
phptpoint
Hoverable Transition Effect Pagination
« 1 2 3 4 5 6 7 8 9 10 »

Space between the pagination

Let's take an example of space between the pagination:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.pagination { 
	display: inline-block; 
} 
.center { 
	text-align:center; 
} 
.pagination a { 
	font-weight:bold; 
	font-size:20px; 
	color: black; 
	float: left; 
	margin:0px 5px; 
	padding: 8px 16px; 
	text-decoration: none; 
	border:1px solid black; 
} 
.pagination a.active { 
	background-color:#f07816; 
} 
.pagination a:hover:not(.active) { 
	background-color: #d4d5d2; 
} 
.php { 
	font-size:42px; 
	font-weight:bold; 
	color:#f07816; 
	text-align:center; 
	margin-bottom:60px; 
} 
.pagi { 
	font-size:24px; 
	font-weight:bold; 
	margin-bottom:20px; 
	text-align:center; 
} 
</style> 
</head> 
<body> 
<div class = "php">phptpoint</div> 
<div class = "pagi">Space Between Pagination</div> 
<div class = "center"> 
<div class="pagination"> 
	<a href="#">«</a> 
	<a href="#">1</a> 
	<a href="#">2</a> 
	<a href="#">3</a> 
	<a href="#">4</a> 
	<a class = "active" href="#">5</a> 
	<a href="#">6</a> 
	<a href="#">7</a> 
	<a href="#">8</a> 
	<a href="#">9</a> 
	<a href="#">10</a> 
	<a href="#">»</a> 
</div> 
</div> 
</body> 
</html>
Output:
phptpoint
Space Between Pagination
« 1 2 3 4 5 6 7 8 9 10 »

Centered pagination

Let's take an example of centered pagination:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.pagination { 
	display: inline-block; 
} 
.center { 
	text-align:center; 
} 
.pagination a { 
	font-weight:bold; 
	font-size:20px; 
	color: black; 
	float: left; 
	padding: 8px 16px; 
	text-decoration: none; 
	border:1px solid black; 
} 
.pagination a.active { 
	background-color:#f07816; 
} 
.pagination a:hover:not(.active) { 
	background-color: #d4d5d2; 
} 
.php { 
	font-size:42px; 
	font-weight:bold; 
	color:#f07816; 
	text-align:center; 
	margin-bottom:60px; 
} 
.pagi { 
	font-size:24px; 
	font-weight:bold; 
	margin-bottom:20px; 
	text-align:center; 
} 
</style> 
</head> 
<body> 
<div class = "php">phptpoint</div> 
<div class = "pagi">Centered Pagination</div> 
<div class = "center"> 
<div class="pagination"> 
	<a href="#">«</a> 
	<a href="#">1</a> 
	<a href="#">2</a> 
	<a href="#">3</a> 
	<a href="#">4</a> 
	<a class = "active" href="#">5</a> 
	<a href="#">6</a> 
	<a href="#">7</a> 
	<a href="#">8</a> 
	<a href="#">9</a> 
	<a href="#">10</a> 
	<a href="#">»</a> 
</div> 
</div> 
</body> 
</html>
Output:
phptpoint
Centered Pagination
« 1 2 3 4 5 6 7 8 9 10 »

Pagination Size

Let's take an example of pagination size:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.pagination { 
	display: inline-block; 
} 
.center { 
	text-align:center; 
} 
.pagination a { 
	font-weight:bold; 
	font-size:25px; 
	color: black; 
	float: left; 
	padding: 8px 16px; 
	text-decoration: none; 
	border:1px solid black; 
} 
.pagination a.active { 
	background-color:#f07816; 
} 
.pagination a:hover:not(.active) { 
	background-color: #d4d5d2; 
} 
.php { 
	font-size:42px; 
	font-weight:bold; 
	color:#f07816; 
	text-align:center; 
	margin-bottom:60px; 
} 
.pagi { 
	font-size:24px; 
	font-weight:bold; 
	margin-bottom:20px; 
	text-align:center; 
} 
</style> 
</head> 
<body> 
<div class = "php">phptpoint</div> 
<div class = "pagi">Pagination Size</div> 
<div class = "center"> 
<div class="pagination"> 
	<a href="#">«</a> 
	<a href="#">1</a> 
	<a href="#">2</a> 
	<a href="#">3</a> 
	<a href="#">4</a> 
	<a class = "active" href="#">5</a> 
	<a href="#">6</a> 
	<a href="#">7</a> 
	<a href="#">8</a> 
	<a href="#">9</a> 
	<a href="#">10</a> 
	<a href="#">»</a> 
</div> 
</div> 
</body> 
</html>
Output:
phptpoint
Pagination Size
« 1 2 3 4 5 6 7 8 9 10 »

Popular Tutorials