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