How to design a nice pagination style for your website.
This tutorial explains how to design a stylish transparent pagination for your website . This will help you to create the most simple & transparent looking CSS pagination links bar .
The final result is something like this:
Step 1: HTML page:
Create a new HTML page and copy and paste the following code inside <body> tag:
<a class="button orange" href="#" onclick="this.blur(); return false;"><span><<</span></a>
<a class="button orange" href="#" onclick="this.blur(); return false;"><span>1</span></a>
<a class="button orange" href="#" onclick="this.blur(); return false;"><span>2</span></a>
<a class="button orange" href="#" onclick="this.blur(); return false;"><span>3</span></a>
<a class="button orange" href="#" onclick="this.blur(); return false;"><span>4</span></a>
<a class="button orange" href="#" onclick="this.blur(); return false;"><span>5</span></a>
<a class="button orange" href="#" onclick="this.blur(); return false;"><span>6</span></a>
<a class="button orange" href="#" onclick="this.blur(); return false;"><span>7</span></a>
<a class="button orange" href="#" onclick="this.blur(); return false;"><span>8</span></a>
<a class="button orange" href="#" onclick="this.blur(); return false;"><span>9</span></a>
<a class="button orange" href="#" onclick="this.blur(); return false;"><span>10</span></a>
<a class="button orange" href="#" onclick="this.blur(); return false;"><span>>></span></a>
</div>
Step 2:CSS file :
Create a new CSS file and copy and paste the following code for Transparent pagination style using css (remeber to link this file in your HTML page):
margin:0;
padding:0;
}
.header{
padding:10px
}
.pagination2{
text-align:left;
background-color:#FF3300;
float:none;
padding:10px;
padding-left:100px;
}
.pagination{
background:#999999;
text-align:left;
background-color:GrayText;
float:none;
padding:10px;
padding-left:100px;
}
.pagination1{
text-align:left;
background-color:darkred;
float:none;
padding:10px;
padding-left:100px;
}
.pagination3{
text-align:left;
background-color:teal;
float:none;
padding:10px;
padding-left:100px;
}
a.button {
background-color:transparent;
background-image: url( 'images/btn_right.png' );
background-repeat:no-repeat ;
background-position:top right;
color: #fff;
display:block; /*opera*/
display:inline-block; /*ie*/
display:-moz-inline-box; /*ff*/ /*font: bold 12px arial, sans-serif;*/
font: normal 13px arial, sans-serif;
height: 32px;
margin-right: 0px;
padding-right: 10px;
text-decoration: none;
}
a.button span {
background-color:transparent;
background-image: url( 'images/btn.png' );
background-repeat:no-repeat ;
display: inline-block;
line-height: 21px;
padding: 3px 0 8px 10px;
}
a.button span img{
margin-left:-5px;
margin-top:-2px;
padding-right:5px;
}
a.button:hover {
background-image: url( 'images/btn_hover_right.png' );
color: #fff;
outline: none;
}
a.button:hover span {
background-image:url( 'images/btn_hover.png');
}
a.orange {
background-image: url( 'images/btn_right.png' );
display:block; /*opera*/
display:inline-block; /*ie*/
display:-moz-inline-box; /*ff*/}
a.orange span {
background-image: url( 'images/btn.png' );
}
a.orange:hover {
background-image: url( 'images/btn_hover_right.png' );
}
a.orange:hover span {
background-image: url( 'images/btn_hover.png' );
}
Save and test the result!
 |  |
Design by: 
A really nice article ... i would like to try it on my blog..
It's good, but not very semantic. You should make this a list, since it is. It's a list of pages. You should also use the CSS short hand and make sure your > is in HTML entities. To get rid of the flicker use CSS sprites. Your CSS could be cut almost half by just looking at it.
And never, never, use JS inline :)
The effect is great though, it just needs a little updating to current standards.