100 Awesome CSS3 Pagination Styles To Paste Into Your Designs

Pagination is crucial to any website when content is split across multiple pages. These CSS styles help make your pagination stand out.

By Tim Trott • HTML & CSS Tutorials • November 15, 2015
6,213 words, estimated reading time 24 minutes.
100 Awesome CSS3 Pagination Styles To Paste Into Your Designs

Page navigation and pagination links are essential components of websites, particularly for organizing and presenting content spread across multiple pages. This collection of CSS3 pagination styles will make your content pager pop!

Pagination allows users to navigate through large sets of data or content by breaking it into manageable segments, improving usability and user experience. By providing clear and intuitive navigation, pagination links enable users to find and access relevant information efficiently, enhancing the overall usability and accessibility of websites.

CSS3 Pagination Styles Usage

The basic usage is to use the code snippet below as a basis for the pagination, but you will have to implement this in whatever language or framework you are using.

Under each style is the CSS code to style the basic pagination, simply select the code that matches the styleA01, or styleB4 accordingly.

xml
<ul class="navigation styleA styleA01">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
css
ul.pagination
{
margin:0px;
margin-bottom:6px;
padding:0px;
height:100%;
overflow:hidden;
font:12px 'Tahoma';
list-style-type:none;
}

ul.pagination li
{
float:left;
margin:0px;
padding:0px;
margin-left:5px;
}

ul.pagination li a
{
color:black;
display:block;
text-decoration:none;
padding:7px 10px 7px 10px;
}

ul.pagination li a img
{

}

CSS3 Pagination Styles

Pagination Style A

01
02
03
04
05
06
07
08
09
10
11
12

css
/*****************************************************************/
/*A */
/*****************************************************************/

ul.styleA li a
{
color:#FFFFFF;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

/*****************************************************************/
/*01 */
/*****************************************************************/

ul.styleA01 li a
{
color:#474747;
border:solid 1px #B6B6B6;
padding:6px 9px 6px 9px;
background:#E6E6E6;
background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6));
}

ul.styleA01 li a:hover,
ul.styleA01 li a.current
{
background:#FFFFFF;
}

/*****************************************************************/
/*02 */
/*****************************************************************/

ul.styleA02 li a
{
color:#893A00;
background:#FFCB00;
background:-moz-linear-gradient(top,#FFD500,#FFCB00);
background:-webkit-gradient(linear,0 0,0 100%,from(#FFD500),to(#FFCB00));
}

ul.styleA02 li a:hover,
ul.styleA02 li a.current
{
background:#FFF4BA;
}

/*****************************************************************/
/*03 */
/*****************************************************************/

ul.styleA03 li a
{
background:#FF7217;
background:-moz-linear-gradient(top,#FF8E1F,#FF7217);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF8E1F),to(#FF7217));
}

ul.styleA03 li a:hover,
ul.styleA03 li a.current
{
color:#C34E00;
background:#FFECDE;
}

/*****************************************************************/
/*04 */
/*****************************************************************/

ul.styleA04 li a
{
background:#D22020;
background:-moz-linear-gradient(top,#DB2B2B,#D22020);
background:-webkit-gradient(linear,0 0,0 100%,from(#DB2B2B),to(#D22020));
}

ul.styleA04 li a:hover,
ul.styleA04 li a.current
{
color:#9F0F0F;
background:#FFE0E0;
}

/*****************************************************************/
/*05 */
/*****************************************************************/

ul.styleA05 li a
{
background:#699613;
background:-moz-linear-gradient(top,#87AB19,#699613);
background:-webkit-gradient(linear,0 0,0 100%,from(#87AB19),to(#699613));
}

ul.styleA05 li a:hover,
ul.styleA05 li a.current
{
color:#4F7119;
background:#E7F2C7;
}

/*****************************************************************/
/*06 */
/*****************************************************************/

ul.styleA06 li a
{
background:#1D8A11;
background:-moz-linear-gradient(top,#26A116,#1D8A11);
background:-webkit-gradient(linear,0 0,0 100%,from(#26A116),to(#1D8A11));
}

ul.styleA06 li a:hover,
ul.styleA06 li a.current
{
color:#176D0E;
background:#DCF4C9;
}

/*****************************************************************/
/*07 */
/*****************************************************************/

ul.styleA07 li a
{
background:#45ABEC;
background:-moz-linear-gradient(top,#5CBCF0,#45ABEC);
background:-webkit-gradient(linear,0 0,0 100%,from(#5CBCF0),to(#45ABEC));
}

ul.styleA07 li a:hover,
ul.styleA07 li a.current
{
color:#358FDD;
background:#DFF4FF;
}

/*****************************************************************/
/*08 */
/*****************************************************************/

ul.styleA08 li a
{
background:#3862C8;
background:-moz-linear-gradient(top,#4A81D3,#3862C8);
background:-webkit-gradient(linear,0 0,0 100%,from(#4A81D3),to(#3862C8));
}

ul.styleA08 li a:hover,
ul.styleA08 li a.current
{
color:#355DDD;
background:#DDE8FE;
}

/*****************************************************************/
/*09 */
/*****************************************************************/

ul.styleA09 li a
{
background:#5A7075;
background:-moz-linear-gradient(top,#788C90,#5A7075);
background:-webkit-gradient(linear,0 0,0 100%,from(#788C90),to(#5A7075));
}

ul.styleA09 li a:hover,
ul.styleA09 li a.current
{
color:#355DDD;
background:#DDE8FE;
}

/*****************************************************************/
/*10 */
/*****************************************************************/

ul.styleA10 li a
{
background:#684BA6;
background:-moz-linear-gradient(top,#8663B8,#684BA6);
background:-webkit-gradient(linear,0 0,0 100%,from(#8663B8),to(#684BA6));
}

ul.styleA10 li a:hover,
ul.styleA10 li a.current
{
color:#643EB3;
background:#EAE4F4;
}

/*****************************************************************/
/*11 */
/*****************************************************************/

ul.styleA11 li a
{
background:#9A6654;
background:-moz-linear-gradient(top,#AE846F,#9A6654);
background:-webkit-gradient(linear,0 0,0 100%,from(#AE846F),to(#9A6654));
}

ul.styleA11 li a:hover,
ul.styleA11 li a.current
{
color:#78594A;
background:#F0E7E3;
}

/*****************************************************************/
/*12 */
/*****************************************************************/

ul.styleA12 li a
{
background:#323232;
background:-moz-linear-gradient(top,#434343,#323232);
background:-webkit-gradient(linear,0 0,0 100%,from(#434343),to(#323232));
}

ul.styleA12 li a:hover,
ul.styleA12 li a.current
{
color:#2F2F2F;
background:#EAEAEA;
}

Pagination Style B

01
02
03
04
05
06
07
08
09
10

css
/*****************************************************************/
/* B */
/*****************************************************************/

ul.styleB li a
{
border:solid 1px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
padding:6px 9px 6px 9px;
}

ul.styleB li
{
padding-bottom:1px;
}

ul.styleB li a:hover,
ul.styleB li a.current
{
color:#FFFFFF;
box-shadow:0px 1px #EDEDED;
-moz-box-shadow:0px 1px #EDEDED;
-webkit-box-shadow:0px 1px #EDEDED;
}

/*****************************************************************/
/* 01 */
/*****************************************************************/

ul.styleB01 li a
{
color:#A74E0D;
border-color:#F3D795;
background:#FFFDF2;
}

ul.styleB01 li a:hover,
ul.styleB01 li a.current
{
color:#893A00;
text-shadow:0px 1px #FFEF42;
border-color:#FFA200;
background:#FFC800;
background:-moz-linear-gradient(top,#FFFFFF 1px,#FFEA01 1px,#FFC800);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#FFEA01),color-stop(1,#FFC800));
}

/*****************************************************************/
/* 02 */
/*****************************************************************/

ul.styleB02 li a
{
color:#0A7EC5;
border-color:#8DC5E6;
background:#F8FCFF;
}

ul.styleB02 li a:hover,
ul.styleB02 li a.current
{
text-shadow:0px 1px #388DBE;
border-color:#3390CA;
background:#58B0E7;
background:-moz-linear-gradient(top,#B4F6FF 1px,#63D0FE 1px,#58B0E7);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#B4F6FF),color-stop(0.02,#63D0FE),color-stop(1,#58B0E7));
}

/*****************************************************************/
/* 03 */
/*****************************************************************/

ul.styleB03 li a
{
color:#4A76C6;
border-color:#8AAEEF;
background:#F7F9FE;
}

ul.styleB03 li a:hover,
ul.styleB03 li a.current
{
text-shadow:0px 1px #4876C9;
border-color:#3D6DC3;
background:#5A8CE7;
background:-moz-linear-gradient(top,#C2E0FF 1px,#84AFFE 1px,#5A8CE7);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C2E0FF),color-stop(0.02,#84AFFE),color-stop(1,#5A8CE7));
}

/*****************************************************************/
/* 04 */
/*****************************************************************/

ul.styleB04 li a
{
color:#8D62C8;
border-color:#BAA2DA;
background:#F9F7FC;
}

ul.styleB04 li a:hover,
ul.styleB04 li a.current
{
text-shadow:0px 1px #7955AB;
border-color:#6F4DA0;
background:#9168C9;
background:-moz-linear-gradient(top,#DFBEFA 1px,#B088E7 1px,#9168C9);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#DFBEFA),color-stop(0.02,#B088E7),color-stop(1,#9168C9));
}

/*****************************************************************/
/* 05 */
/*****************************************************************/

ul.styleB05 li a
{
color:#EF6420;
border-color:#FFBD85;
background:#FFFAF7;
}

ul.styleB05 li a:hover,
ul.styleB05 li a.current
{
text-shadow:0px 1px #CA470E;
border-color:#D13F11;
background:#E95B2B;
background:-moz-linear-gradient(top,#FFBE01 1px,#FE7C02 1px,#E95B2B);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFBE01),color-stop(0.02,#FE7C02),color-stop(1,#E95B2B));
}

/*****************************************************************/
/* 06 */
/*****************************************************************/

ul.styleB06 li a
{
color:#E92F2F;
border-color:#FFA5A5;
background:#FFF8F8;
}

ul.styleB06 li a:hover,
ul.styleB06 li a.current
{
text-shadow:0px 1px #B72E2E;
border-color:#AD2D2D;
background:#E43838;
background:-moz-linear-gradient(top,#FF9B9B 1px,#FE5555 1px,#E43838);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FF9B9B),color-stop(0.02,#FE5555),color-stop(1,#E43838));
}

/*****************************************************************/
/* 07 */
/*****************************************************************/

ul.styleB07 li a
{
color:#916C59;
border-color:#D6BFB4;
background:#FBF9F8;
}

ul.styleB07 li a:hover,
ul.styleB07 li a.current
{
text-shadow:0px 1px #866454;
border-color:#886756;
background:#A37A66;
background:-moz-linear-gradient(top,#E9C4B2 1px,#C59882 1px,#A37A66);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#E9C4B2),color-stop(0.02,#C59882),color-stop(1,#A37A66));
}

/*****************************************************************/
/* 08 */
/*****************************************************************/

ul.styleB08 li a
{
color:#478223;
border-color:#B2D397;
background:#F7FAF4;
}

ul.styleB08 li a:hover,
ul.styleB08 li a.current
{
text-shadow:0px 1px #4E802C;
border-color:#478223;
background:#599F2F;
background:-moz-linear-gradient(top,#9FE355 1px,#79BF4A 1px,#599F2F);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9FE355),color-stop(0.02,#79BF4A),color-stop(1,#599F2F));
}

/*****************************************************************/
/* 09 */
/*****************************************************************/

ul.styleB09 li a
{
color:#707070;
border-color:#CFCFCF;
background:#FAFAFA;
}

ul.styleB09 li a:hover,
ul.styleB09 li a.current
{
text-shadow:0px 1px #636363;
border-color:#5D5D5D;
background:#777777;
background:-moz-linear-gradient(top,#C0C0C0 1px,#929292 1px,#777777);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C0C0C0),color-stop(0.02,#929292),color-stop(1,#777777));
}

/*****************************************************************/
/* 10 */
/*****************************************************************/

ul.styleB10 li a
{
color:#444444;
border-color:#BEBEBE;
background:#FAFAFA;
}

ul.styleB10 li a:hover,
ul.styleB10 li a.current
{
text-shadow:0px 1px #3C3C3C;
border-color:#202020;
background:#525252;
background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252));
}

Pagination Style C

01
02
03
04
05
06
07
08
09
10

css
/*****************************************************************/
/* C */
/*****************************************************************/

ul.styleC li a
{
color:#707070;
background:#FFFFFF;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:solid 1px #DCDCDC;
padding:6px 9px 6px 9px;
}

ul.styleC li
{
padding-bottom:1px;
}

ul.styleC li a:hover,
ul.styleC li a.current
{
color:#FFFFFF;
box-shadow:0px 1px #EDEDED;
-moz-box-shadow:0px 1px #EDEDED;
-webkit-box-shadow:0px 1px #EDEDED;
}

/*****************************************************************/
/* 01 */
/*****************************************************************/

ul.styleC01 li a:hover,
ul.styleC01 li a.current
{
color:#893A00;
text-shadow:0px 1px #FFEF42;
border-color:#FFA200;
background:#FFC800;
background:-moz-linear-gradient(top,#FFFFFF 1px,#FFEA01 1px,#FFC800);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#FFEA01),color-stop(1,#FFC800));
}

/*****************************************************************/
/* 02 */
/*****************************************************************/

ul.styleC02 li a:hover,
ul.styleC02 li a.current
{
text-shadow:0px 1px #388DBE;
border-color:#3390CA;
background:#58B0E7;
background:-moz-linear-gradient(top,#B4F6FF 1px,#63D0FE 1px,#58B0E7);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#B4F6FF),color-stop(0.02,#63D0FE),color-stop(1,#58B0E7));
}

/*****************************************************************/
/* 03 */
/*****************************************************************/

ul.styleC03 li a:hover,
ul.styleC03 li a.current
{
text-shadow:0px 1px #4876C9;
border-color:#3D6DC3;
background:#5A8CE7;
background:-moz-linear-gradient(top,#C2E0FF 1px,#84AFFE 1px,#5A8CE7);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C2E0FF),color-stop(0.02,#84AFFE),color-stop(1,#5A8CE7));
}

/*****************************************************************/
/* 04 */
/*****************************************************************/

ul.styleC04 li a:hover,
ul.styleC04 li a.current
{
text-shadow:0px 1px #7955AB;
border-color:#6F4DA0;
background:#9168C9;
background:-moz-linear-gradient(top,#DFBEFA 1px,#B088E7 1px,#9168C9);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#DFBEFA),color-stop(0.02,#B088E7),color-stop(1,#9168C9));
}

/*****************************************************************/
/* 05 */
/*****************************************************************/

ul.styleC05 li a:hover,
ul.styleC05 li a.current
{
text-shadow:0px 1px #CA470E;
border-color:#D13F11;
background:#E95B2B;
background:-moz-linear-gradient(top,#FFBE01 1px,#FE7C02 1px,#E95B2B);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFBE01),color-stop(0.02,#FE7C02),color-stop(1,#E95B2B));
}

/*****************************************************************/
/* 06 */
/*****************************************************************/

ul.styleC06 li a:hover,
ul.styleC06 li a.current
{
text-shadow:0px 1px #B72E2E;
border-color:#AD2D2D;
background:#E43838;
background:-moz-linear-gradient(top,#FF9B9B 1px,#FE5555 1px,#E43838);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FF9B9B),color-stop(0.02,#FE5555),color-stop(1,#E43838));
}

/*****************************************************************/
/* 07 */
/*****************************************************************/

ul.styleC07 li a:hover,
ul.styleC07 li a.current
{
text-shadow:0px 1px #866454;
border-color:#886756;
background:#A37A66;
background:-moz-linear-gradient(top,#E9C4B2 1px,#C59882 1px,#A37A66);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#E9C4B2),color-stop(0.02,#C59882),color-stop(1,#A37A66));
}

/*****************************************************************/
/* 08 */
/*****************************************************************/

ul.styleC08 li a:hover,
ul.styleC08 li a.current
{
text-shadow:0px 1px #4E802C;
border-color:#478223;
background:#599F2F;
background:-moz-linear-gradient(top,#9FE355 1px,#79BF4A 1px,#599F2F);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9FE355),color-stop(0.02,#79BF4A),color-stop(1,#599F2F));
}

/*****************************************************************/
/* 09 */
/*****************************************************************/

ul.styleC09 li a:hover,
ul.styleC09 li a.current
{
text-shadow:0px 1px #636363;
border-color:#5D5D5D;
background:#777777;
background:-moz-linear-gradient(top,#C0C0C0 1px,#929292 1px,#777777);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C0C0C0),color-stop(0.02,#929292),color-stop(1,#777777));
}

/*****************************************************************/
/* 10 */
/*****************************************************************/

ul.styleC10 li a:hover,
ul.styleC10 li a.current
{
text-shadow:0px 1px #3C3C3C;
border-color:#202020;
background:#525252;
background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252));
}

Pagination Style D

01
02
03
04
05
06
07
08
09
10

css
/*****************************************************************/
/* D */
/*****************************************************************/

ul.styleD 
{
padding:8px;
background:#F9F9F9;
border:solid 1px #E2E2E2;
}

ul.styleD li a
{
color:#333333;
text-shadow:0px 1px #F6F6F6;
padding:6px 9px 6px 9px;
border:solid 1px #B6B6B6;
box-shadow:0px 1px #EFEFEF;
-moz-box-shadow:0px 1px #EFEFEF;
-webkit-box-shadow:0px 1px #EFEFEF;
background:#E6E6E6;
background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6));
}

ul.styleD li
{
padding-bottom:1px;
}

ul.styleD li a:hover,
ul.styleD li a.current
{
color:#FFFFFF;
box-shadow:0px 1px #E7E7E7;
-moz-box-shadow:0px 1px #E7E7E7;
-webkit-box-shadow:0px 1px #E7E7E7;
}

/*****************************************************************/
/* 01 */
/*****************************************************************/

ul.styleD01 li a:hover,
ul.styleD01 li a.current
{
color:#893A00;
text-shadow:0px 1px #FFEF42;
border-color:#FFA200;
background:#FFC800;
background:-moz-linear-gradient(top,#FFFFFF 1px,#FFEA01 1px,#FFC800);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#FFEA01),color-stop(1,#FFC800));
}

/*****************************************************************/
/* 02 */
/*****************************************************************/

ul.styleD02 li a:hover,
ul.styleD02 li a.current
{
text-shadow:0px 1px #388DBE;
border-color:#3390CA;
background:#58B0E7;
background:-moz-linear-gradient(top,#B4F6FF 1px,#63D0FE 1px,#58B0E7);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#B4F6FF),color-stop(0.02,#63D0FE),color-stop(1,#58B0E7));
}

/*****************************************************************/
/* 03 */
/*****************************************************************/

ul.styleD03 li a:hover,
ul.styleD03 li a.current
{
text-shadow:0px 1px #4876C9;
border-color:#3D6DC3;
background:#5A8CE7;
background:-moz-linear-gradient(top,#C2E0FF 1px,#84AFFE 1px,#5A8CE7);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C2E0FF),color-stop(0.02,#84AFFE),color-stop(1,#5A8CE7));
}

/*****************************************************************/
/* 04 */
/*****************************************************************/

ul.styleD04 li a:hover,
ul.styleD04 li a.current
{
text-shadow:0px 1px #7955AB;
border-color:#6F4DA0;
background:#9168C9;
background:-moz-linear-gradient(top,#DFBEFA 1px,#B088E7 1px,#9168C9);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#DFBEFA),color-stop(0.02,#B088E7),color-stop(1,#9168C9));
}

/*****************************************************************/
/* 05 */
/*****************************************************************/

ul.styleD05 li a:hover,
ul.styleD05 li a.current
{
text-shadow:0px 1px #CA470E;
border-color:#D13F11;
background:#E95B2B;
background:-moz-linear-gradient(top,#FFBE01 1px,#FE7C02 1px,#E95B2B);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFBE01),color-stop(0.02,#FE7C02),color-stop(1,#E95B2B));
}

/*****************************************************************/
/* 06 */
/*****************************************************************/

ul.styleD06 li a:hover,
ul.styleD06 li a.current
{
text-shadow:0px 1px #B72E2E;
border-color:#AD2D2D;
background:#E43838;
background:-moz-linear-gradient(top,#FF9B9B 1px,#FE5555 1px,#E43838);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FF9B9B),color-stop(0.02,#FE5555),color-stop(1,#E43838));
}

/*****************************************************************/
/* 07 */
/*****************************************************************/

ul.styleD07 li a:hover,
ul.styleD07 li a.current
{
text-shadow:0px 1px #866454;
border-color:#886756;
background:#A37A66;
background:-moz-linear-gradient(top,#E9C4B2 1px,#C59882 1px,#A37A66);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#E9C4B2),color-stop(0.02,#C59882),color-stop(1,#A37A66));
}

/*****************************************************************/
/* 08 */
/*****************************************************************/

ul.styleD08 li a:hover,
ul.styleD08 li a.current
{
text-shadow:0px 1px #4E802C;
border-color:#478223;
background:#599F2F;
background:-moz-linear-gradient(top,#9FE355 1px,#79BF4A 1px,#599F2F);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9FE355),color-stop(0.02,#79BF4A),color-stop(1,#599F2F));
}

/*****************************************************************/
/* 09 */
/*****************************************************************/

ul.styleD09 li a:hover,
ul.styleD09 li a.current
{
text-shadow:0px 1px #636363;
border-color:#5D5D5D;
background:#777777;
background:-moz-linear-gradient(top,#C0C0C0 1px,#929292 1px,#777777);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C0C0C0),color-stop(0.02,#929292),color-stop(1,#777777));
}

/*****************************************************************/
/* 10 */
/*****************************************************************/

ul.styleD10 li a:hover,
ul.styleD10 li a.current
{
text-shadow:0px 1px #3C3C3C;
border-color:#202020;
background:#525252;
background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252));
}

Pagination Style E

01
02
03
04
05
06
07
08
09
10

css
/*****************************************************************/
/* E */
/*****************************************************************/

ul.styleE 
{
padding:8px;
background:#FFFFFF;
border:solid 1px #E9E9E9;
}

ul.styleE,
ul.styleE li a
{
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

ul.styleE li a
{
background:#FFFFFF;
}

ul.styleE li
{
padding-bottom:1px;
}

ul.styleE li a:hover,
ul.styleE li a.current,
ul.styleE li a.first,
ul.styleE li a.previous,
ul.styleE li a.next,
ul.styleE li a.last
{
color:#FFFFFF;
border-bottom:solid 1px;
box-shadow:0px 1px #EDEDED;
-moz-box-shadow:0px 1px #EDEDED;
-webkit-box-shadow:0px 1px #EDEDED;
}

/*****************************************************************/
/* 01 */
/*****************************************************************/

ul.styleE01 li a
{
color:#A74E0D;
}

ul.styleE01 li a:hover,
ul.styleE01 li a.current,
ul.styleE01 li a.first,
ul.styleE01 li a.previous,
ul.styleE01 li a.next,
ul.styleE01 li a.last
{
color:#893A00;
text-shadow:0px 1px #FFEF42;
border-bottom-color:#FFAB00;
background:#FFC800;
background:-moz-linear-gradient(top,#FFEC01,#FFC800);
background:-webkit-gradient(linear,0 0,0 100%,from(#FFEC01),to(#FFC800));
}

/*****************************************************************/
/* 02 */
/*****************************************************************/

ul.styleE02 li a
{
color:#0A7EC5;
}

ul.styleE02 li a:hover,
ul.styleE02 li a.current,
ul.styleE02 li a.first,
ul.styleE02 li a.previous,
ul.styleE02 li a.next,
ul.styleE02 li a.last
{
text-shadow:0px 1px #388BBC;
border-bottom-color:#358FDD;
background:#58B0E7;
background:-moz-linear-gradient(top,#64D1FF1,#58B0E7);
background:-webkit-gradient(linear,0 0,0 100%,from(#64D1FF),to(#58B0E7));
}

/*****************************************************************/
/* 03 */
/*****************************************************************/

ul.styleE03 li a
{
color:#4A76C6;
}

ul.styleE03 li a:hover,
ul.styleE03 li a.current,
ul.styleE03 li a.first,
ul.styleE03 li a.previous,
ul.styleE03 li a.next,
ul.styleE03 li a.last
{
text-shadow:0px 1px #4674C8;
border-bottom-color:#355DDD;
background:#5A8CE7;
background:-moz-linear-gradient(top,#86B1FF,#5A8CE7);
background:-webkit-gradient(linear,0 0,0 100%,from(#86B1FF),to(#5A8CE7));
}

/*****************************************************************/
/* 04 */
/*****************************************************************/

ul.styleE04 li a
{
color:#8D62C8;
}

ul.styleE04 li a:hover,
ul.styleE04 li a.current,
ul.styleE04 li a.first,
ul.styleE04 li a.previous,
ul.styleE04 li a.next,
ul.styleE04 li a.last
{
text-shadow:0px 1px #7753A9;
border-bottom-color:#643EB3;
background:#9168C9;
background:-moz-linear-gradient(top,#B189E8,#9168C9);
background:-webkit-gradient(linear,0 0,0 100%,from(#B189E8),to(#9168C9));
}

/*****************************************************************/
/* 05 */
/*****************************************************************/

ul.styleE05 li a
{
color:#EF6420;
}

ul.styleE05 li a:hover,
ul.styleE05 li a.current,
ul.styleE05 li a.first,
ul.styleE05 li a.previous,
ul.styleE05 li a.next,
ul.styleE05 li a.last
{
text-shadow:0px 1px #C94510;
border-bottom-color:#DF361B;
background:#E95B2B;
background:-moz-linear-gradient(top,#FF7E00,#E95B2B);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF7E00),to(#E95B2B));
}

/*****************************************************************/
/* 06 */
/*****************************************************************/

ul.styleE06 li a
{
color:#E92F2F;
}

ul.styleE06 li a:hover,
ul.styleE06 li a.current,
ul.styleE06 li a.first,
ul.styleE06 li a.previous,
ul.styleE06 li a.next,
ul.styleE06 li a.last
{
text-shadow:0px 1px #B52D2D;
border-bottom-color:#C90000;
background:#E43838;
background:-moz-linear-gradient(top,#FF5656,#E43838);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF5656),to(#E43838));
}

/*****************************************************************/
/* 07 */
/*****************************************************************/

ul.styleE07 li a
{
color:#916C59;
}

ul.styleE07 li a:hover,
ul.styleE07 li a.current,
ul.styleE07 li a.first,
ul.styleE07 li a.previous,
ul.styleE07 li a.next,
ul.styleE07 li a.last
{
text-shadow:0px 1px #AC826E;
border-bottom-color:#865447;
background:#A37A66;
background:-moz-linear-gradient(top,#C79A84,#A37A66);
background:-webkit-gradient(linear,0 0,0 100%,from(#C79A84),to(#A37A66));
}

/*****************************************************************/
/* 08 */
/*****************************************************************/

ul.styleE08 li a
{
color:#478223;
}

ul.styleE08 li a:hover,
ul.styleE08 li a.current,
ul.styleE08 li a.first,
ul.styleE08 li a.previous,
ul.styleE08 li a.next,
ul.styleE08 li a.last
{
text-shadow:0px 1px #4D7F2B;
border-bottom-color:#35771C;
background:#599F2F;
background:-moz-linear-gradient(top,#7BC14C,#599F2F);
background:-webkit-gradient(linear,0 0,0 100%,from(#7BC14C),to(#599F2F));
}

/*****************************************************************/
/* 09 */
/*****************************************************************/

ul.styleE09 li a
{
color:#444444;
}

ul.styleE09 li a:hover,
ul.styleE09 li a.current,
ul.styleE09 li a.first,
ul.styleE09 li a.previous,
ul.styleE09 li a.next,
ul.styleE09 li a.last
{
text-shadow:0px 1px #626262;
border-bottom-color:#4D4D4D;
background:#777777;
background:-moz-linear-gradient(top,#939393,#777777);
background:-webkit-gradient(linear,0 0,0 100%,from(#939393),to(#777777));
}

/*****************************************************************/
/* 10 */
/*****************************************************************/

ul.styleE10 li a
{
color:#A74E0D;
}

ul.styleE10 li a:hover,
ul.styleE10 li a.current,
ul.styleE10 li a.first,
ul.styleE10 li a.previous,
ul.styleE10 li a.next,
ul.styleE10 li a.last
{
text-shadow:0px 1px #3C3C3C;
border-bottom-color:#313131;
background:#525252;
background:-moz-linear-gradient(top,#6D6D6D,#525252);
background:-webkit-gradient(linear,0 0,0 100%,from(#6D6D6D),to(#525252));
}

Pagination Style F

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16

css
/*****************************************************************/
/* F */
/*****************************************************************/

ul.styleF 
{
padding:8px;
margin-bottom:1px;
border-bottom:solid 1px;
box-shadow:0px 1px #EDEDED;
-moz-box-shadow:0px 1px #EDEDED;
-webkit-box-shadow:0px 1px #EDEDED;
}

ul.styleF01,
ul.styleF02,
ul.styleF03,
ul.styleF04,
ul.styleF05
{
border:solid 1px #AEAEAE;
background:#E9E9E9;
background:-moz-linear-gradient(top,#FFFFFF,#E9E9E9 97%,#FFFFFF 98%);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.00,#FFFFFF),color-stop(0.97,#E9E9E9),color-stop(0.98,#FFFFFF));
}

ul.styleF,
ul.styleF li a
{
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

ul.styleF li a,
ul.styleF li a:hover,
ul.styleF li a.current
{
color:#FFFFFF;
text-shadow:none;
}

ul.styleF01 li a,
ul.styleF01 li a:hover,
ul.styleF01 li a.current,
ul.styleF02 li a,
ul.styleF03 li a,
ul.styleF04 li a,
ul.styleF05 li a
{
color:#444444;
text-shadow:0px 1px #FFFFFF;
}

/*****************************************************************/
/* 01 */
/*****************************************************************/

ul.styleF01 li a
{
padding:6px 9px 6px 9px;
border:solid 1px transparent;
}

ul.styleF01 li a:hover,
ul.styleF01 li a.current
{
border-color:#AEAEAE;
background:transparent;
background:-moz-linear-gradient(top,transparent,transparent 95%,#FFFFFF 96%);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.00,transparent),color-stop(0.95,transparent),color-stop(0.96,#FFFFFF));
}

/*****************************************************************/
/* 02 */
/*****************************************************************/

ul.styleF02 li a:hover,
ul.styleF02 li a.current
{
background:#589D1E;
}

/*****************************************************************/
/* 03 */
/*****************************************************************/

ul.styleF03 li a:hover,
ul.styleF03 li a.current
{
background:#2B8AC7;
}

/*****************************************************************/
/* 04 */
/*****************************************************************/

ul.styleF04 li a:hover,
ul.styleF04 li a.current
{
background:#F77110;
}

/*****************************************************************/
/* 05 */
/*****************************************************************/

ul.styleF05 li a:hover,
ul.styleF05 li a.current
{
background:#9A66BC;
}

/*****************************************************************/
/* 06 */
/*****************************************************************/

ul.styleF06
{
border-color:#FFAB00;
background:#FFC700;
background:-moz-linear-gradient(top,#FFEC01,#FFC700);
background:-webkit-gradient(linear,0 0,0 100%,from(#FFEC01),to(#FFC700));
}

ul.styleF06 li a
{
color:#DF361B;
text-shadow:0px 1px #FFFF00;
}

ul.styleF06 li a:hover,
ul.styleF06 li a.current
{
background:#DF361B;
}

/*****************************************************************/
/* 07 */
/*****************************************************************/

ul.styleF07
{
border-color:#DF361B;
background:#E95B2C;
background:-moz-linear-gradient(top,#FF7E00,#E95B2C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF7E00),to(#E95B2C));
}

ul.styleF07 li a:hover,
ul.styleF07 li a.current
{
color:#DF361B;
background:#FFFFFF;
}

/*****************************************************************/
/* 08 */
/*****************************************************************/

ul.styleF08
{
border-color:#941B1B;
background:#A72323;
background:-moz-linear-gradient(top,#BA3737,#A72323);
background:-webkit-gradient(linear,0 0,0 100%,from(#BA3737),to(#A72323));
}

ul.styleF08 li a:hover,
ul.styleF08 li a.current
{
color:#A72323;
background:#FFFFFF;
}

/*****************************************************************/
/* 09 */
/*****************************************************************/

ul.styleF09
{
border-color:#6B6B6B;
background:#949494;
background:-moz-linear-gradient(top,#B3B3B3,#949494);
background:-webkit-gradient(linear,0 0,0 100%,from(#B3B3B3),to(#949494));
}

ul.styleF09 li a
{
color:#000000;
text-shadow:0px 1px #B6B6B6;
}

ul.styleF09 li a:hover,
ul.styleF09 li a.current
{
background:#565656;
text-shadow:0px 1px #404040;
}

/*****************************************************************/
/* 10 */
/*****************************************************************/

ul.styleF10
{
border-color:#4C1B1B;
background:#7F2D2D;
background:-moz-linear-gradient(top,#AE3A3A,#7F2D2D);
background:-webkit-gradient(linear,0 0,0 100%,from(#AE3A3A),to(#7F2D2D));
}

ul.styleF10 li a:hover,
ul.styleF10 li a.current
{
color:#7F2D2D;
background:#FFBA58;
}

/*****************************************************************/
/* 11 */
/*****************************************************************/

ul.styleF11
{
border-color:#28570F;
background:#438819;
background:-moz-linear-gradient(top,#5BA01E,#438819);
background:-webkit-gradient(linear,0 0,0 100%,from(#5BA01E),to(#438819));
}

ul.styleF11 li a:hover,
ul.styleF11 li a.current
{
box-shadow:0px 1px #519D1D;
-moz-box-shadow:0px 1px #519D1D;
-webkit-box-shadow:0px 1px #519D1D;
background:#519D1D;
background:-moz-linear-gradient(top,#15450A 1px,#1C5C0D 1px,#256D12);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#15450A),color-stop(0.02,#1C5C0D),color-stop(1,#256D12));
}

/*****************************************************************/
/* 12 */
/*****************************************************************/

ul.styleF12
{
border-color:#0E4B36;
background:#187D5B;
background:-moz-linear-gradient(top,#1DA187,#187D5B);
background:-webkit-gradient(linear,0 0,0 100%,from(#1DA187),to(#187D5B));
}

ul.styleF12 li a:hover,
ul.styleF12 li a.current
{
box-shadow:0px 1px #1C946E;
-moz-box-shadow:0px 1px #1C946E;
-webkit-box-shadow:0px 1px #1C946E;
background:#1C946E;
background:-moz-linear-gradient(top,#0A3D2B 1px,#0E523A 1px,#136348);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#0A3D2B),color-stop(0.02,#0E523A),color-stop(1,#136348));
}

/*****************************************************************/
/* 13 */
/*****************************************************************/

ul.styleF13
{
border-color:#173E93;
background:#2669B3;
background:-moz-linear-gradient(top,#2B8BC8,#2669B3);
background:-webkit-gradient(linear,0 0,0 100%,from(#2B8BC8),to(#2669B3));
}

ul.styleF13 li a:hover,
ul.styleF13 li a.current
{
box-shadow:0px 1px #2C7DC1;
-moz-box-shadow:0px 1px #2C7DC1;
-webkit-box-shadow:0px 1px #2C7DC1;
background:#2C7DC1;
background:-moz-linear-gradient(top,#15450A 1px,#174886 1px,#1E5897);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#15450A),color-stop(0.02,#174886),color-stop(1,#1E5897));
}

/*****************************************************************/
/* 14 */
/*****************************************************************/

ul.styleF14
{
border-color:#442E69;
background:#734D95;
background:-moz-linear-gradient(top,#9960AC,#734D95);
background:-webkit-gradient(linear,0 0,0 100%,from(#9960AC),to(#734D95));
}

ul.styleF14 li a:hover,
ul.styleF14 li a.current
{
box-shadow:0px 1px #895BA8;
-moz-box-shadow:0px 1px #895BA8;
-webkit-box-shadow:0px 1px #895BA8;
background:#895BA8;
background:-moz-linear-gradient(top,#38244A 1px,#4B3064 1px,#5B3D75);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#38244A),color-stop(0.02,#4B3064),color-stop(1,#5B3D75));
}

/*****************************************************************/
/* 15 */
/*****************************************************************/

ul.styleF15
{
border-color:#865447;
background:#A27965;
background:-moz-linear-gradient(top,#C79A84,#A27965);
background:-webkit-gradient(linear,0 0,0 100%,from(#C79A84),to(#A27965));
}

ul.styleF15 li a:hover,
ul.styleF15 li a.current
{
box-shadow:0px 1px #B49078;
-moz-box-shadow:0px 1px #B49078;
-webkit-box-shadow:0px 1px #B49078;
background:#B49078;
background:-moz-linear-gradient(top,#593D31 1px,#785241 1px,#896250);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#593D31),color-stop(0.02,#785241),color-stop(1,#896250));
}

/*****************************************************************/
/* 16 */
/*****************************************************************/

ul.styleF16
{
border-color:#313131;
background:#525252;
background:-moz-linear-gradient(top,#6D6D6D,#525252);
background:-webkit-gradient(linear,0 0,0 100%,from(#6D6D6D),to(#525252));
}

ul.styleF16 li a:hover,
ul.styleF16 li a.current
{
box-shadow:0px 1px #626262;
-moz-box-shadow:0px 1px #626262;
-webkit-box-shadow:0px 1px #626262;
background:#626262;
background:-moz-linear-gradient(top,#1A1A1A 1px,#242424 1px,#2E2E2E);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#1A1A1A),color-stop(0.02,#242424),color-stop(1,#2E2E2E));
}

Pagination Style G

01
02
03
04
05
06
07
08
09
10

css
/*****************************************************************/
/* G */
/*****************************************************************/

ul.styleG 
{
padding:0px;
margin-bottom:1px;
border-bottom:solid 1px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
box-shadow:0px 1px #EDEDED;
-moz-box-shadow:0px 1px #EDEDED;
-webkit-box-shadow:0px 1px #EDEDED;
}

ul.styleG li:first-child a
{
border-radius:3px 0px 0px 3px;
-moz-border-radius:3px 0px 0px 3px;
-webkit-border-radius:3px 0px 0px 3px;
}

ul.styleG li:last-child a
{
border-radius:0px 3px 3px 0px;
-moz-border-radius:0px 3px 3px 0px;
-webkit-border-radius:0px 3px 3px 0px;
}

ul.styleG li a:hover,
ul.styleG li a.current
{
color:#FFFFFF;
text-shadow:none;
}

ul.styleG li a
{
padding:15px 10px 15px 10px;
}

/*****************************************************************/
/* 01 */
/*****************************************************************/

ul.styleG01
{
border-color:#FFAB00;
background:#FFC700;
background:-moz-linear-gradient(top,#FFEC01,#FFC700);
background:-webkit-gradient(linear,0 0,0 100%,from(#FFEC01),to(#FFC700));
}

ul.styleG01 li a
{
color:#DF361B;
text-shadow:0px 1px #FFFF00;
}

ul.styleG01 li a:hover,
ul.styleG01 li a.current
{
background:#EE7902;
background:-moz-linear-gradient(top,#F6A72D,#EE7902);
background:-webkit-gradient(linear,0 0,0 100%,from(#F6A72D),to(#EE7902));
}

/*****************************************************************/
/* 02 */
/*****************************************************************/

ul.styleG02
{
border-color:#E74701;
background:#EE7701;
background:-moz-linear-gradient(top,#F6A82E,#EE7701);
background:-webkit-gradient(linear,0 0,0 100%,from(#F6A82E),to(#EE7701));
}

ul.styleG02 li a
{
color:#000000;
text-shadow:0px 1px #F6B01D;
}

ul.styleG02 li a:hover,
ul.styleG02 li a.current
{
background:#E74801;
background:-moz-linear-gradient(top,#E77301,#E74801);
background:-webkit-gradient(linear,0 0,0 100%,from(#E77301),to(#E74801));
}

/*****************************************************************/
/* 03 */
/*****************************************************************/

ul.styleG03
{
border-color:#358FDC;
background:#58B0E7;
background:-moz-linear-gradient(top,#64D1FF,#58B0E7);
background:-webkit-gradient(linear,0 0,0 100%,from(#64D1FF),to(#58B0E7));
}

ul.styleG03 li a
{
color:#0C3C77;
text-shadow:0px 1px #80D5F5;
}

ul.styleG03 li a:hover,
ul.styleG03 li a.current
{
background:#3581B1;
background:-moz-linear-gradient(top,#4096CB,#3581B1);
background:-webkit-gradient(linear,0 0,0 100%,from(#4096CB),to(#3581B1));
}

/*****************************************************************/
/* 04 */
/*****************************************************************/

ul.styleG04
{
border-color:#355BDC;
background:#598BE7;
background:-moz-linear-gradient(top,#86B1FF,#598BE7);
background:-webkit-gradient(linear,0 0,0 100%,from(#86B1FF),to(#598BE7));
}

ul.styleG04 li a
{
color:#0C2169;
text-shadow:0px 1px #90BFF5;
}

ul.styleG04 li a:hover,
ul.styleG04 li a.current
{
background:#3D69BA;
background:-moz-linear-gradient(top,#4777D0,#3D69BA);
background:-webkit-gradient(linear,0 0,0 100%,from(#4777D0),to(#3D69BA));
}

/*****************************************************************/
/* 05 */
/*****************************************************************/

ul.styleG05
{
border-color:#6B4BCD;
background:#967DDC;
background:-moz-linear-gradient(top,#B690F0,#967DDC);
background:-webkit-gradient(linear,0 0,0 100%,from(#B690F0),to(#967DDC));
}

ul.styleG05 li a
{
color:#2B2242;
text-shadow:0px 1px #B9A2E9;
}

ul.styleG05 li a:hover,
ul.styleG05 li a.current
{
background:#6C4CCD;
background:-moz-linear-gradient(top,#8A64C6,#6C4CCD);
background:-webkit-gradient(linear,0 0,0 100%,from(#8A64C6),to(#6C4CCD));
}

/*****************************************************************/
/* 06 */
/*****************************************************************/

ul.styleG06
{
border-color:#A37453;
background:#B99578;
background:-moz-linear-gradient(top,#D0AC8F,#B99578);
background:-webkit-gradient(linear,0 0,0 100%,from(#D0AC8F),to(#B99578));
}

ul.styleG06 li a
{
color:#48342B;
text-shadow:0px 1px #D0B59F;
}

ul.styleG06 li a:hover,
ul.styleG06 li a.current
{
background:#8B705A;
background:-moz-linear-gradient(top,#9C816B,#8B705A);
background:-webkit-gradient(linear,0 0,0 100%,from(#9C816B),to(#8B705A));
}

/*****************************************************************/
/* 07 */
/*****************************************************************/

ul.styleG07
{
border-color:#39961D;
background:#5FB531;
background:-moz-linear-gradient(top,#79D447,#5FB531);
background:-webkit-gradient(linear,0 0,0 100%,from(#79D447),to(#5FB531));
}

ul.styleG07 li a
{
color:#0C5400;
text-shadow:0px 1px #90D84E;
}

ul.styleG07 li a:hover,
ul.styleG07 li a.current
{
background:#39971D;
background:-moz-linear-gradient(top,#43AD23,#39971D);
background:-webkit-gradient(linear,0 0,0 100%,from(#43AD23),to(#39971D));
}

/*****************************************************************/
/* 08 */
/*****************************************************************/

ul.styleG08
{
border-color:#6B6B6B;
background:#949494;
background:-moz-linear-gradient(top,#B3B3B3,#949494);
background:-webkit-gradient(linear,0 0,0 100%,from(#B3B3B3),to(#949494));
}

ul.styleG08 li a
{
color:#000000;
text-shadow:0px 1px #B6B6B6;
}

ul.styleG08 li a:hover,
ul.styleG08 li a.current
{
background:#6C6C6C;
background:-moz-linear-gradient(top,#848484,#6C6C6C);
background:-webkit-gradient(linear,0 0,0 100%,from(#848484),to(#6C6C6C));
}

/*****************************************************************/
/* 09 */
/*****************************************************************/

ul.styleG09
{
border-color:#313131;
background:#525252;
background:-moz-linear-gradient(top,#6D6D6D,#525252);
background:-webkit-gradient(linear,0 0,0 100%,from(#6D6D6D),to(#525252));
}

ul.styleG09 li a
{
color:#FFFFFF;
}

ul.styleG09 li a:hover,
ul.styleG09 li a.current
{
background:#313131;
background:-moz-linear-gradient(top,#3F3F3F,#313131);
background:-webkit-gradient(linear,0 0,0 100%,from(#3F3F3F),to(#313131));
}

/*****************************************************************/
/* 10 */
/*****************************************************************/

ul.styleG10
{
border-color:#931616;
background:#AF2626;
background:-moz-linear-gradient(top,#DD423B,#AF2626);
background:-webkit-gradient(linear,0 0,0 100%,from(#DD423B),to(#AF2626));
}

ul.styleG10 li a
{
color:#FFFFFF;
}

ul.styleG10 li a:hover,
ul.styleG10 li a.current
{
background:#E8972E;
background:-moz-linear-gradient(top,#FFC051,#E8972E);
background:-webkit-gradient(linear,0 0,0 100%,from(#FFC051),to(#E8972E));
}

Pagination Style H

01
02
03
04

css
/*****************************************************************/
/* H */
/*****************************************************************/

ul.styleH 
{
border:solid 1px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

ul.styleH li a
{
color:#222222;
padding:15px 9px 15px 9px;
text-shadow:0px 1px #FFFFFF;
}

ul.styleH01 li a,
ul.styleH02 li a,
ul.styleH03 li a
{
border:solid 1px transparent;
border-width:0px 1px 0px 1px;
}

ul.styleH03 li a,
ul.styleH04 li a
{
text-shadow:0px 1px #FFFFFF;
}

ul.styleH li:first-child a
{
border-radius:3px 0px 0px 3px;
-moz-border-radius:3px 0px 0px 3px;
-webkit-border-radius:3px 0px 0px 3px;
}

ul.styleH li:last-child a
{
border-radius:0px 3px 3px 0px;
-moz-border-radius:0px 3px 3px 0px;
-webkit-border-radius:0px 3px 3px 0px;
}

ul.styleH01 li a.last:hover,
ul.styleH02 li a.last:hover,
ul.styleH03 li a.last:hover
{
border-right-color:transparent;
}

ul.styleH01 li a.first:hover,
ul.styleH02 li a.first:hover,
ul.styleH03 li a.first:hover
{
border-left-color:transparent;
}

/*****************************************************************/
/* 01 */
/*****************************************************************/

ul.styleH01,
ul.styleH01 li a:hover,
ul.styleH01 li a.current
{
border-color:#A6A6A6;
}

ul.styleH01
{
background:#EDEDED;
background:-moz-linear-gradient(top,#FFFFFF 0px,#EDEDED 97%,#FFFFFF 98%);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.00,#FFFFFF),color-stop(0.97,#EDEDED),color-stop(0.98,#FFFFFF));
}

/*****************************************************************/
/* 02 */
/*****************************************************************/

ul.styleH02,
ul.styleH02 li a:hover,
ul.styleH02 li a.current
{
border-color:#C3C3C3;
}

ul.styleH02
{
background:#EFEFEF;
background:-moz-linear-gradient(top,#FFFFFF,#EFEFEF);
background:-webkit-gradient(linear,0 0,0 100%,from(#FFFFFF),to(#EFEFEF));
}

ul.styleH02 li a
{
color:#2A619F;
}

ul.styleH02 li a:hover,
ul.styleH02 li a.current
{
background:#EEEEEE;
background:-moz-linear-gradient(top,#EEEEEE,#FEFEFE);
background:-webkit-gradient(linear,0 0,0 100%,from(#EEEEEE),to(#FEFEFE));
}

/*****************************************************************/
/* 03 */
/*****************************************************************/

ul.styleH03,
ul.styleH03 li a:hover,
ul.styleH03 li a.current
{
border-color:#B6B6B6;
}

ul.styleH03
{
background:#E5E5E5;
background:-moz-linear-gradient(top,#FFFFFF 0px,#F4F4F4 1px,#E5E5E5);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F4F4F4),color-stop(1,#E5E5E5));
}

ul.styleH03 li a:hover,
ul.styleH03 li a.current
{
background:#EEEEEE;
background:-moz-linear-gradient(top,#EEEEEE 0px,#F4F4F4 97%,#FFFFFF 98%);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.00,#EEEEEE),color-stop(0.97,#F4F4F4),color-stop(0.98,#FFFFFF));
}

/*****************************************************************/
/* 04 */
/*****************************************************************/

ul.styleH04,
ul.styleH04 li a:hover,
ul.styleH04 li a.current
{
border-color:#CFCFCF;
}

ul.styleH04
{
border-width:0px 0px 1px 0px;
background:#EFEFEF;
background:-moz-linear-gradient(top,#FFFFFF,#EFEFEF);
background:-webkit-gradient(linear,0 0,0 100%,from(#FFFFFF),to(#EFEFEF));
}

ul.styleH04 li a
{
border:solid 1px transparent;
border-width:1px 1px 0px 1px;
}

ul.styleH04 li a:hover,
ul.styleH04 li a.current
{
border-width:1px 1px 0px 1px;
background:#F0F0F0;
background:-moz-linear-gradient(top,#F0F0F0,#FFFFFF);
background:-webkit-gradient(linear,0 0,0 100%,from(#F0F0F0),to(#FFFFFF));
}

Pagination Style I

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18

css
/*****************************************************************/
/*I */
/*****************************************************************/

ul.styleI li,
ul.styleI li a
{
color:#FFFFFF;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

ul.styleI01 li a,
ul.styleI02 li a,
ul.styleI03 li a,
ul.styleI04 li a,
ul.styleI05 li a
{
color:#444444;
padding:6px 9px 6px 9px;
border:solid 1px #BCBCBC;
background:#F3F3F3;
background:-moz-linear-gradient(top,#FFFFFF 1px,#FEFEFE 1px,#F3F3F3);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#FEFEFE),color-stop(1,#F3F3F3));
}

ul.styleI li a img
{
*margin:2px 0px 2px 0px;
}

/*****************************************************************/
/*01 */
/*****************************************************************/

ul.styleI01 li a.first,
ul.styleI01 li a.previous,
ul.styleI01 li a.next,
ul.styleI01 li a.last,
ul.styleI01 li a.current,
ul.styleI01 li a:hover
{
border-color:#77AADD;
background:#DEEEFF;
background:-moz-linear-gradient(top,#FFFFFF 1px,#EBF5FF 1px,#DEEEFF);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#EBF5FF),color-stop(1,#DEEEFF));
}

/*****************************************************************/
/*02 */
/*****************************************************************/

ul.styleI02 li a.first,
ul.styleI02 li a.previous,
ul.styleI02 li a.next,
ul.styleI02 li a.last,
ul.styleI02 li a.current,
ul.styleI02 li a:hover
{
border-color:#BC8484;
background:#F2DFDF;
background:-moz-linear-gradient(top,#FFFFFF 1px,#F9EFEF 1px,#F2DFDF);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F9EFEF),color-stop(1,#F2DFDF));
}

/*****************************************************************/
/*03 */
/*****************************************************************/

ul.styleI03 li a.first,
ul.styleI03 li a.previous,
ul.styleI03 li a.next,
ul.styleI03 li a.last,
ul.styleI03 li a.current,
ul.styleI03 li a:hover
{
border-color:#74AF45;
background:#E2F4D3;
background:-moz-linear-gradient(top,#FFFFFF 1px,#EFF5E9 1px,#E2F4D3);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#EFF5E9),color-stop(1,#E2F4D3));
}

/*****************************************************************/
/*04 */
/*****************************************************************/

ul.styleI04 li a.first,
ul.styleI04 li a.previous,
ul.styleI04 li a.next,
ul.styleI04 li a.last,
ul.styleI04 li a.current,
ul.styleI04 li a:hover
{
border-color:#CE9900;
background:#FFE592;
background:-moz-linear-gradient(top,#FFFFFF 1px,#FFF0C1 1px,#FFE592);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#FFF0C1),color-stop(1,#FFE592));
}

/*****************************************************************/
/*05 */
/*****************************************************************/

ul.styleI05 li a.first,
ul.styleI05 li a.previous,
ul.styleI05 li a.next,
ul.styleI05 li a.last,
ul.styleI05 li a.current,
ul.styleI05 li a:hover
{
border-color:#9D9D9D;
background:#D9D9D9;
background:-moz-linear-gradient(top,#FFFFFF 1px,#EAEAEA 1px,#D9D9D9);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#EAEAEA),color-stop(1,#D9D9D9));
}

/*****************************************************************/
/*06 */
/*****************************************************************/

ul.styleI06 li a
{
background:#E6650C;
background:-moz-linear-gradient(top,#FF9C00,#E6650C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF9C00),to(#E6650C));
}

ul.styleI06 li a.current,
ul.styleI06 li a:hover
{
background:#683664;
background:-moz-linear-gradient(top,#83457E,#683664);
background:-webkit-gradient(linear,0 0,0 100%,from(#83457E),to(#683664));
}

/*****************************************************************/
/*07 */
/*****************************************************************/

ul.styleI07 li a
{
background:#683664;
background:-moz-linear-gradient(top,#83457E,#683664);
background:-webkit-gradient(linear,0 0,0 100%,from(#83457E),to(#683664));
}

ul.styleI07 li a.current,
ul.styleI07 li a:hover
{
background:#E6650C;
background:-moz-linear-gradient(top,#FF9C00,#E6650C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF9C00),to(#E6650C));
}

/*****************************************************************/
/*08 */
/*****************************************************************/

ul.styleI08 li a
{
background:#105C90;
background:-moz-linear-gradient(top,#2775AA,#105C90);
background:-webkit-gradient(linear,0 0,0 100%,from(#2775AA),to(#105C90));
}

ul.styleI08 li a.current,
ul.styleI08 li a:hover
{
background:#348800;
background:-moz-linear-gradient(top,#42AC00,#348800);
background:-webkit-gradient(linear,0 0,0 100%,from(#42AC00),to(#348800));
}

/*****************************************************************/
/*09 */
/*****************************************************************/

ul.styleI09 li a
{
background:#348800;
background:-moz-linear-gradient(top,#42AC00,#348800);
background:-webkit-gradient(linear,0 0,0 100%,from(#42AC00),to(#348800));
}

ul.styleI09 li a.current,
ul.styleI09 li a:hover
{
background:#966B5E;
background:-moz-linear-gradient(top,#B68D81,#966B5E);
background:-webkit-gradient(linear,0 0,0 100%,from(#B68D81),to(#966B5E));
}

/*****************************************************************/
/*10 */
/*****************************************************************/

ul.styleI10 li a
{
background:#A8436E;
background:-moz-linear-gradient(top,#C8618D,#A8436E);
background:-webkit-gradient(linear,0 0,0 100%,from(#C8618D),to(#A8436E));
}

ul.styleI10 li a.current,
ul.styleI10 li a:hover
{
background:#E6650C;
background:-moz-linear-gradient(top,#FF9C00,#E6650C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF9C00),to(#E6650C));
}

/*****************************************************************/
/*11 */
/*****************************************************************/

ul.styleI11 li a
{
background:#1889B2;
background:-moz-linear-gradient(top,#26BDD5,#1889B2);
background:-webkit-gradient(linear,0 0,0 100%,from(#26BDD5),to(#1889B2));
}

ul.styleI11 li a.current,
ul.styleI11 li a:hover
{
background:#E6650C;
background:-moz-linear-gradient(top,#FF9C00,#E6650C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF9C00),to(#E6650C));
}

/*****************************************************************/
/*12 */
/*****************************************************************/

ul.styleI12 li a
{
background:#208B32;
background:-moz-linear-gradient(top,#36A949,#208B32);
background:-webkit-gradient(linear,0 0,0 100%,from(#36A949),to(#208B32));
}

ul.styleI12 li a.current,
ul.styleI12 li a:hover
{
background:#E6650C;
background:-moz-linear-gradient(top,#FF9C00,#E6650C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF9C00),to(#E6650C));
}

/*****************************************************************/
/*13 */
/*****************************************************************/

ul.styleI13 li a
{
background:#B11C34;
background:-moz-linear-gradient(top,#D63048,#B11C34);
background:-webkit-gradient(linear,0 0,0 100%,from(#D63048),to(#B11C34));
}

ul.styleI13 li a.current,
ul.styleI13 li a:hover
{
background:#E6650C;
background:-moz-linear-gradient(top,#FF9C00,#E6650C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF9C00),to(#E6650C));
}

/*****************************************************************/
/*14 */
/*****************************************************************/

ul.styleI14 li a
{
background:#7D4835;
background:-moz-linear-gradient(top,#A3644F,#7D4835);
background:-webkit-gradient(linear,0 0,0 100%,from(#A3644F),to(#7D4835));
}

ul.styleI14 li a.current,
ul.styleI14 li a:hover
{
background:#E6650C;
background:-moz-linear-gradient(top,#FF9C00,#E6650C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF9C00),to(#E6650C));
}

/*****************************************************************/
/*15 */
/*****************************************************************/

ul.styleI15 li a
{
background:#966B5E;
background:-moz-linear-gradient(top,#B68D81,#966B5E);
background:-webkit-gradient(linear,0 0,0 100%,from(#B68D81),to(#966B5E));
}

ul.styleI15 li a.current,
ul.styleI15 li a:hover
{
background:#348800;
background:-moz-linear-gradient(top,#41AB00,#348800);
background:-webkit-gradient(linear,0 0,0 100%,from(#41AB00),to(#348800));
}

/*****************************************************************/
/*16 */
/*****************************************************************/

ul.styleI16 li a
{
background:#E6650C;
background:-moz-linear-gradient(top,#FF9C00,#E6650C);
background:-webkit-gradient(linear,0 0,0 100%,from(#FF9C00),to(#E6650C));
}

ul.styleI16 li a.current,
ul.styleI16 li a:hover
{
background:#348800;
background:-moz-linear-gradient(top,#42AC00,#348800);
background:-webkit-gradient(linear,0 0,0 100%,from(#42AC00),to(#348800));
}

/*****************************************************************/
/*17 */
/*****************************************************************/

ul.styleI17 li a
{
background:#105C90;
background:-moz-linear-gradient(top,#2775AA,#105C90);
background:-webkit-gradient(linear,0 0,0 100%,from(#2775AA),to(#105C90));
}

ul.styleI17 li a.current,
ul.styleI17 li a:hover
{
background:#AE2626;
background:-moz-linear-gradient(top,#DE423B,#AE2626);
background:-webkit-gradient(linear,0 0,0 100%,from(#DE423B),to(#AE2626));
}

/*****************************************************************/
/*18 */
/*****************************************************************/

ul.styleI18 li a
{
background:#474747;
background:-moz-linear-gradient(top,#5D5D5D,#474747);
background:-webkit-gradient(linear,0 0,0 100%,from(#5D5D5D),to(#474747));
}

ul.styleI18 li a.current,
ul.styleI18 li a:hover
{
background:#3377B5;
background:-moz-linear-gradient(top,#4798D6,#3377B5);
background:-webkit-gradient(linear,0 0,0 100%,from(#4798D6),to(#3377B5));
}

About the Author

Tim Trott is a senior software engineer with over 20 years of experience in designing, building, and maintaining software systems across a range of industries. Passionate about clean code, scalable architecture, and continuous learning, he specialises in creating robust solutions that solve real-world problems. He is currently based in Edinburgh, where he develops innovative software and collaborates with teams around the globe.

Related ArticlesThese articles may also be of interest to you

18 Great CSS3 Text Effects You Can Copy/Paste
Pure CSS Table Free Layouts and Grids Template
CSS Message Notification Bars

CommentsShare your thoughts in the comments below

My website and its content are free to use without the clutter of adverts, popups, marketing messages or anything else like that. If you enjoyed reading this article, or it helped you in some way, all I ask in return is you leave a comment below or share this page with your friends. Thank you.

There are no comments yet. Why not get the discussion started?

New comments for this post are currently closed.