I actually got the idea on Antonio’s excellent blog (Woork) and used his code in some of my sites but it didn’t work well for me, so I wrote something mine that works (I am not saying his doesn’t work, it just didn’t work for me).

One of the main differences is that he calls the css via the id of the list and I do it via the class of the list. The difference is that if you show the list more than once (on the top and on the bottom of the page) my version will validate and his will not.

The result of a copy/paste of my code gives you this:

• The « prev button is unclickable (we are on the first page)
• The first page is selected
• The second and third pages are normal page links and
• The next » is the a link when we pass our mouse over it (:hover)

The HTML code looks like this:

<ul class="pages">
	<li class="prev-off">&laquo; prev</li>
	<li class="active">1</li>
	<li><a href="?page=2">2</a></li>
	<li><a href="?page=3">3</a></li>
	<li><a href="?page=' . ($_GET['page']+1) . '">next &raquo;</a></li>
</ul>

The ul class is “pages“, to turn the buttons prev and next off we use the class “prev-off” and “next-off“. We give the class “active” to the <li> element, not to the <a> element! Notice that the link is not present in the active <li> element.

This is the CSS:

.pages {
	list-style: none;
	padding: 0; margin: 0;
	overflow: auto;
}
.pages li {
	float: left;
	margin-right: 2px;
}
.pages li a {
	display: block;
	padding: 1px 5px;
	border: solid 1px #c0002d;
	color: #c0002d;
}
.pages li a:hover {
	background: #c0002d;
	color: white;
	text-decoration: none;
}
.pages .prev-off, .pages .next-off {
	border: solid 1px black;
	padding: 1px 5px;
}
.pages .active {
	padding: 2px 5px 1px 5px;
	font-weight: bold;
}

You can customize this in any way you want just by changing some lines in the CSS. Try playing around with the colors (background, border and color attributes).