Pagination Styles

This page covers advanced pagination styling including hover effects, transitions, and breadcrumbs.

Pagination with Hover Effect

Use the :hover selector to change the background color of each page link when the user hovers over them:

Example

Example Code

css

.pagination li a:hover:not(.active) {
  background-color: lightgray;

  }

Transition Effect on Hover

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

Example

Example Code

css

Try it Yourself

.pagination li a {
  display: block;
  padding: 8px 12px;

  text-decoration: none;
  border: 1px solid gray;
  color:
  black;
  margin: 0 4px;
  border-radius: 5px;

  transition: background-color 1s;
}

Breadcrumb Pagination

Another variation of pagination is a so-called "breadcrumb":

Home

Pictures

Summer 25

Italy

Example

Example Code

css

Try it Yourself

ul.breadcrumb {
  padding: 8px;

list-style: none;
  background-color: #eee;
}

ul.breadcrumb li {display: inline;}
ul.breadcrumb li a {color: green;}

ul.breadcrumb li+li:before {

padding: 8px;
  color: black;
  content: "/\00a0";
}

Pagination with Hover Effect

Example

Example Code

Transition Effect on Hover

Example

Example Code

Breadcrumb Pagination

Example

Example Code

Interactive Code Examples

CSS Example 1

CSS Example 2

CSS Example 3