CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Pagination

Pagination links indicate a series of related content exists across multiple pages.

Generally paginations are used where a multi-page approach to long lists of content improves general performance.

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

Basic Pagination

The following example shows how to create basic pagination:

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

Hoverable Pagination

Use the :hover pseudo-class to change the background color of each page link when moving the mouse over them:

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

Pagination Active State

Pagination links are customizable for different circumstances. Use an .active class to indicate the current page:

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

Pagination Disabled State

Use pointer-events: none; to disable the link functionality of Hyperlinks:

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

The pointer-events property specifies whether or not an element can become the target of mouse events:


Rounded Borders

Use the border-radius property to have rounded corners for pagination links:

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

Note that we also changed border-color to transparent:


Pagination Sizing

Change the size of the pagination with padding, font-size and line-height property:

Large Pagination:
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
Default Pagination:
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
Small Pagination:
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
Run code

Pagination Alignment

Wrap pagination in a <div> and add style text-align:* in order to change the alignment of pagination:

  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
Run code

Space Between Items

Use margin property to add spaces between links:

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

Breadcrumbs

Breadcrumb indicates the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Run code