Perfect Pagination Approach Using CSS

This tutorial will help you to design a pagination style for dividing a long list of data in extra pages or just for search result. This is a very simple blog post which illustrates how to design a perfect pagination approach using a semantic and clean coding in HTML and CSS. Into this tutorial we have provided HTML and CSS code for pagination styles of Flickr, Digg and simple. You can use this code into your personal or commercial projects.

Pagination Structure

Here is the common and classic pagination structure used in everywhere. It has four essential elements. i.e.

– Disabled Previous/Next Button
– Highlighted Active Page
– Regular Page Selector
– Enabled Previous/Next Button

HTML list (<ul>) having <li> elements is commonly used to design this structure and id is applied to corresponding <ul>. Take a look at tutorial for an explanation.

HTML Code: Flickr Style Pagination

The Flickr style pagination will be look like this:

CSS Code: Flickr Style Pagination

Here is the CSS for to support above HTML code.

HTML Code: Digg Style Pagination

Digg style pagination will be look like this.

CSS Code: Digg Style Pagination

CSS code for this pagination is very to Flickr style pagination CSS code.

HTML Code: Clean Pagination Style

Minimal and clean designs are liked by everybody. So we have provided clean style pagination for you.

CSS Code: Clean Pagination Style

Here is the CSS code for clean styled pagination.