Post thumbnail: 23 CSS Pagination

23 CSS Pagination

Collection of free HTML and CSS pagination code examples: responsive, simple, material design, navigation dots, etc. Update of February 2018 collection. 3 new items.

Demo image: Roman Pagination

Author

  • Michael Sveistrup

Made with

  • HTML / CSS (SCSS)

About the code

Roman Pagination

Simple CSS Roman pagination.

Demo image: Pac-Man CSS Pagination

Author

  • Paraskevas Ntinakis

Made with

  • HTML / CSS

About the code

Pac-Man CSS Pagination

Pure CSS Pac-Man pagination with animation on hover.

Demo image: Responsive Pagination

Author

  • Milica

Made with

  • HTML
  • CSS/SCSS

About the code

Responsive Pagination

Simple responsive pagination.

Demo image: Roundie Pagination

Author

  • ahmed beheiry

Made with

  • HTML
  • CSS/Sass

About the code

Roundie Pagination

HTML and CSS pagination.

Demo image: Pagination

Author

  • Robert

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

About the code

Pagination

Pagination example that allows you to navigate between different pages. This example would have to have href attributes in order to work with an actual application that requires pagination.

Demo image: CSS Pagination

Author

  • Stas Melnikov

Made with

  • HTML
  • CSS

About the code

CSS Pagination

Pagination with CSS custom properties.

Demo Image: 6 Pure CSS Pagination
Demo Image: 6 Pure CSS Pagination

6 Pure CSS Pagination

Pagination options and designs.
Made by MojoM
May 25, 2017

Demo Image: SVG Page Hopper
Demo GIF: SVG Page Hopper

SVG Page Hopper

HTML, CSS and SVG page hopper.
Made by Chris Gannon
May 14, 2017

Demo Image: Infinite Pagination
Demo GIF: Infinite Pagination

Infinite Pagination

Infinite pagination in HTML and CSS.
Made by Mariusz Dabrowski
April 27, 2017

Demo image: Pure CSS Pagination

Author

  • Henrique Rodrigues

Made with

  • HTML / CSS

About the code

Pure CSS Pagination

CSS Components: pagination.

Demo Image: 12 HTML And CSS Pagination
Demo Image: 12 HTML And CSS Pagination

12 HTML And CSS Pagination

12 ideas for website pagination with HTML and CSS.
Made by Rosa
November 3, 2016

Demo Image: Pagination
Demo GIF: Pagination

Pagination

Pagination with HTML/CSS/JavaScript.
Made by JP Nothard
October 9, 2016

Demo Image: Pagination Hover Animation
Demo GIF: Pagination Hover Animation

Pagination Hover Animation

HTML and CSS pagination hover animation.
Made by Elena Nazarova
September 12, 2016

Demo Image: Pagination
Demo Image: Pagination

Pagination

Pagination with a hover effect.
Made by Andre Wichert
August 27, 2016

Demo Image: Pagination Indicators
Demo Image: Pagination Indicators

Pagination Indicators

Pagination indicators with HTML, CSS and JavaScript.
Made by Moses Holmström
August 19, 2016

Demo Image: Pagination With HTML & CSS
Demo Image: Pagination With HTML & CSS

Pagination With HTML & CSS

Pure CSS pagination.
Made by Brendan Mullins
August 16, 2016

Demo Image: Responsive Pagination
Demo Image: Responsive Pagination

Responsive Pagination

10 pages + prev/next arrows.
Made by Tommy Hodgins
April 5, 2016

Demo Image: Dot Hopper - Pagination
Demo GIF: Dot Hopper - Pagination

Dot Hopper - Pagination

HTML, CSS and JS pagination.
Made by Elliot Geno
March 13, 2016

Demo Image: Dynamic Page Controls
Demo Image: Dynamic Page Controls

Dynamic Page Controls

Dynamic page controls with disabled back buttons and morphing continue button when reaching the last page.
Made by Wayne Dunkley
March 18, 2015

Demo Image: Responsive Flexbox Pagination
Demo Image: Responsive Flexbox Pagination

Responsive Flexbox Pagination

A responsive page link menu built with flexbox!
Made by William H.
February 22, 2015

Demo Image: Responsive Magic Line Pagination
Demo GIF: Responsive Magic Line Pagination

Responsive Magic Line Pagination

Create a magic line for your pagination. It looks awesome.
Made by Ryan Yu
February 18, 2015

Demo Image: Pagination
Demo Image: Pagination

Pagination

Responsive, accessible, alternate pagination experiment.
Made by Simon Goellner
November 11, 2014

Demo Image: Pagination Arrows
Demo GIF: Pagination Arrows

Pagination Arrows

Flexing pagination arrows.
Made by Hakim El Hattab
October 18, 2013

Back to top