Transparent pagination style using css

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:

Perfect pagination style using CSS

Step 1: HTML page:

Create a new HTML page and copy and paste the following code inside <body> tag:

<div class="pagination2">
    <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):

body{
    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!

button-4109 button-310

0 comments :