Published on: 20 May, 2016

How to style pagination links with CSS

Posted by andy | 1461 views 1 likes 0 favourites 1 comments
Tumblr Digg Google Plus

Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.

Let says we have the following format of pagination links.

<nav>
	<ul class='paging'>
		<li><a href=''>1</a></li>
		<li><a href=''>2</a></li>
		<li><a href=''>3</a></li>
		<li><a href=''>4</a></li>
		<li><a href=''>5</a></li>
		<li><a href=''>6</a></li>
		<li><a href=''>7</a></li>
	</ul>
</nav>

To create a simple pagination links, we can just use the following css style sheet.

nav ul.paging, nav ul.paging li {
    margin:0;
    padding:0;
    list-style:none;
}

nav ul.paging{
    margin:10px 0;
}

nav ul.paging li a {
	background-color: #fff;
	border: 1px solid #ddd;
	position: relative;
	float: left;
	padding: 5px 10px;
	color: #0275d8;
	text-decoration: none;
	cursor:pointer;
	margin-right:3px;
}

nav ul.paging li a:focus, nav ul.paging li a:hover, nav ul.paging li a.active {
  background-color: #eceeef;
  color: #014c8c;
  border-color: #ddd;
}

Demo of Pagination Links using CSS.

By default when using UL LI tags, it comes with margin and padding and with list style on it. You will need to reset or clear the default values. Then the next important part is to layout the LI tags into a display inline format. This can be easily done by set this LI tag to use float property and set it to the left.

Download Demo Files

Download Pagination Links

Comments
J C
Commented on: 13 Jun, 2017 03:06:56 PM
Also can add a "NEXT" and "PREVIOUS" buttons as well, (or >> <<), using the "»" and "«" code.
andy
Commented on: 28 Jul, 2017 12:09:56 PM
Thanks JC for the feedback. this can be easily done by adding at the front of the UL and at the end of the UL list.
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 31 January, 2016
The easy way to optimize your site for printing is to create a separated external css targeting a media to print only. When a printing action is being executed, the browser will send over the information from your page to the printer. It will also check if there is any specific style sheet that will be used for printing mode only. If there is, it will then render the page content using the media print css file. Therefore the page you see in the printer paper may completely looks different with the one you see in a page. The idea of optimizing in here is to hide unnecessary content.
Related Tutorials
Published on: 10 August, 2013
z-index is a css property that allows to position an object/element in front/behind of other elements.