Skip to main content

CSS Pagination Examples

CSS pagination is a very useful technique for indexing different pages of a website on the homepage. If your website has lots of pages, you have to add some sort of pagination to each page.

Simple Pagination​

This is the simplest pagination. You have to use pagination class to an <ul> element to attain this pagination.

.pagination {  
	display:  inline-block;  
}  
  
.pagination a {  
	color:  black;  
	float:  left;  
	padding:  8px 16px;  
	text-decoration:  none;  
}

Example pagination simple

Active and Hoverable Pagination​

Squared Active and Hoverable Buttons​

Highlight the current page with an .active class, and use the :hover selector to change the color of each page link when moving the mouse over them:

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

Example pagination active and hoverable

Rounded Active and Hoverable Buttons​

Add the border-radius property if you want a rounded "active" and "hover" button:

.pagination a {  
	border-radius:  5px;  
}  
  
.pagination a.active {  
	border-radius:  5px;  
}

Example pagination rounded active and hoverable

Hoverable Transition Effect​

Add the transition property to the page links to create a transition effect on hover:

.pagination a {  
	transition:  background-color .3s;  
}

Example pagination hoverable transition effect

Bordered Pagination​

Squared Borders​

Use the border property to add borders to the pagination:

.pagination a {  
	border:  1px solid #ddd;  /* Gray */  
}

Example pagination squared borders

Rounded Borders​

Add rounded borders to your first and last link in the pagination:

.pagination a:first-child {  
	border-top-left-radius:  5px;  
	border-bottom-left-radius:  5px;  
}  
  
.pagination a:last-child {  
	border-top-right-radius:  5px;  
	border-bottom-right-radius:  5px;  
}

Example pagination rounded borders

note

Add the margin property if you do not want to group the page links

.pagination a {  
	margin:  0 4px;  /* 0 is for top and bottom. Feel free to change it */  
}

Example pagination space between links

Pagination Size​

Change the size of the pagination with the font-size property:

.pagination a {  
	font-size:  22px;  
}

Example pagination size

Centered Pagination​

To center the pagination, wrap a container element (like <div>) around it with text-align:center

.center {  
	text-align:  center;  
}

Example pagination size

Table of Contents