• PHP Training
    •  
  • Login/Register

    • Home >>CSS Tutorial >CSS Pagination

    CSS Pagination

    « Previous Next »

    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 »
    « Previous Next »

    CSS Tutorial What is CSS CSS Syntax CSS Selectors How to add CSS CSS Colors CSS Comments CSS Background CSS Border CSS Display property How do I hide an element when printing a web page CSS Float CSS Font CSS Line Height CSS Opacity property CSS Overflow CSS Padding CSS Margin property CSS Position CSS Vertical align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Media Queries CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS Flexbox CSS 2D Transforms CSS 3D Transform CSS Aural Media CSS User Interface CSS Pagination CSS Table
    No Sidebar ads