CSS Pagination Examples

Simple Pagination

For lots of pages in your website add some sort of pagination to each page:

Example:-

Active & Hoverable Pagination

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

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

Example:-

Rounded Active & Hoverable Buttons

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

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

Example:-

Hoverable Transition Effect

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

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

Example:-

Bordered Pagination

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

To use the border property to add borders to the pagination:

Example:-

Rounded Borders

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

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

Example:-

Space Between Links

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

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

Example:-

Pagination Size

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

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

Example:-

Breadcrumbs

Another variation of pagination is so-called "breadcrumbs":

• Home
• Jobportal
• Current Affairs
• List

Example:-