CSS Pagination Example

Learn how to create responsive pagination with CSS.

Simple Pagination

If there are many pages on the website, you may want to add some pagination functionality to each page:

Example

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

Try It Yourself

Active hoverable pagination

With .active Class highlights the current page and uses it when the mouse is moved over them :hover Selector changes the color of each page link:

Example

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

Try It Yourself

Rounded active hoverable pagination

If you need rounded 'active' and 'hover' buttons, please add border-radius Attribute:

Example

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

Try It Yourself

Hoverable transition effect

Please add transition Attribute adds a transition effect to the page links, creating a transition effect when the mouse hovers over them:

Example

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

Try It Yourself

Pagination with border

Please use border Attribute adds a border to pagination:

Example

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

Try It Yourself

Rounded border radius

Tip:Add rounded border radius to the first and last links of pagination:

Example

.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;
}

Try It Yourself

Space between links

Tip:If you do not want to combine page links, please add margin Attribute:

Example

.pagination a {
  margin: 0 4px; /* The top and bottom margins are 0, can be flexibly modified */
}

Try It Yourself

Pagination size

Please use font-size Attribute changes the size of pagination:

Example

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

Try It Yourself

Centered pagination

To center pagination, please use the one that has been set text-align:center The container element (such as <div>) encloses it:

Example

.center {
  text-align: center;
}

Try It Yourself

More Examples

Example

Try It Yourself

Breadcrumbs

Another form of pagination is known as 'breadcrumbs':

Example

ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "\00a0";
}

Try It Yourself