Are you a member? Register or Login

Building a Custom CSS3 Pagination User Interface

Website pagination is a crucial aspect to any layout with repeating content. Blogs are often a consideration, but also portfolio listings or related news/feed links or any other types of archive. Organizing a blog post into many pages helps to cut down on reading time – especially with particularly in-depth articles.

In this tutorial I want to demonstrate a collection of CSS techniques for designing pagination. Once you combine these designs with content systems like WordPress you can see how the interfaces really work in action. To get an idea of the final product take a look at my live sample demo below.

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

Explore Envato Elements

Live DemoDownload Source Code

Getting Started

This tutorial will not require any JavaScript code, so there are no file dependencies at all. I’d like to start by outlining the simple page layout. Each paginated link goes to a different HTML page with a list of 5 in total.

You’ll quickly notice the commented line which displays a previous button to move between pages. I have only displayed this link within the other layouts because on the first page we have no way to navigation back to a previous page. Also the first list item .single has no anchor link, it just displays the current page number and the total number of pages.

The example above is copied from index-2.html which displays the second page. You will find each individual numeric page does not have an anchor leading back onto itself. Instead we apply a class of .current onto the list item for a different appearance.

General Page Styles

I have split up the stylesheet into segments along with the typical page resets. This makes it easier to copy and paste the exact style of pagination links you want to work with.

Nothing too different here in comparison to my other tutorials. Using the outer .paginate class on the unordered list means this will apply to every UL on all the pages. It increases the generic font size while ensuring the list will span a full width of the parent container.

Directly underneath this code you’ll find the other 5 blocks for each of the pagination sections. This is an example from my first design idea. The container .paginate.pag1 has no default styles, but if you wanted to apply something directly onto this unordered list you can do so by targeting individual pagination styles.

pagination screenshot ex1

The links use a flat color background along with some box shadows which update when clicked. It’s a simple design which can genuinely fit into any website layout, provided that you update the color scheme a little bit.

Further Pagination Styles

Looking at my second design you may notice this was built around the Minimal Pagination PSD released on Pixels Daily. I gave the shadows more length and kept the font sizes smaller. But it’s a fantastic template you can start customizing very quickly.

pagination screenshot ex2

Another cool release from Pixels Daily named Slick Pagination Links includes a PSD and CSS copy. My third demo is based on this design, but I’ve written all the CSS code myself. I tried to match similar colors in the gradient but used a thicker border around each link.

It’ll probably look best on a lighter background or wrapped in a light UL container. But updating the border and background gradients wouldn’t take much work using a color scheme designer. Active and hover states simply update the background and I’ve kept away from changing the box shadows.

pagination screenshot ex3

All of these designs could be extended to include different types of fonts, icons, padding, and other CSS features. All of my code is written to the lowest common denominator, so that hopefully these styles can perform nicely with any webpage.

Rounded Nav Links

My final two pages use the same type of design, but simply reverse the color scheme from light to dark. I’m only showing the darker CSS codes because they have more changes. All of the display properties should match perfectly aside from the colors.

pagination screenshot ex4

This particular design is based off a premium PSD called Flat Pagination Interface, also from Pixels Daily. By looking at the screenshot you’ll see it has a smaller list and it uses the ellipsis to range between pages. This is common when you have 10+ pages in the list and don’t want to display them all at once.

I mentioned earlier that we can target the outer unordered list by using its class name such as .paginate.pag5. It helps for demoing links, but it probably won’t be useful on a live website unless you plan to utilize different styles of pagination.

pagination screenshot ex5 dark version

Each of these final two styles include CSS3 transitions for hover states. It’s a nice additional feature you may choose to keep, but it doesn’t always look good in all instances. Both the light and dark color schemes include highlights of green to match the page layout. If you like this design, toy around with the colors and see if the light or dark interface looks better for your project.

Live DemoDownload Source Code


Many of these techniques can be adapted with your own styles to build unique website pagination. It is not a crucial aspect to every website, but immediately becomes important if you’re dealing with a substantial amount of content.

Feel free to download a copy of my source code and use these CSS styles for any website pagination. Also if you have questions or related suggestions you can share with us in the discussion area below.