• 1
  • 2
Home > Tips

Creative HTML Pagination Free Download

Pagination should be the most common element for which is used widely in almost every website to page the content which is too long to read. Most of pagination is controlled by program code, but now Ill show you a kind of pagination completely created by css3 and html code.

 

 

As we can see, the HTML Pagination is completely created by css3 and html code. Weve just used a few css3 properties in this effect: weve used the gradient property to make gradient images and the border-radius property to make the round corners of the buttons.

Besides, in the HTML Pagination, weve used :target property to imitate the active effect.

 

 HTML Code


 <ul class='pager'>
  <li id='first'><a href='#first'>« First</a></li>
  <li id='page_up'><a href='#page_up'>«</a></li>
  <li id='one'><a href='#one'>1</a></li>
  <li id='two'><a href='#two'>2</a></li>
  <li id='three'><a href='#three'>3</a></li>
  <li id='four'><a href='#four'>4</a></li>
  <li id='five'><a href='#five'>5</a></li>
  <li id='six'><a href='#six'>6</a></li>
  <li id='seven'><a href='#seven'>7</a></li>
  <li id='next_page'><a href='#next_page'>»</a></li>
  <li id='last'><a href='#last'>Last »</a></li>
</ul>

 

 

 CSS Code


 body {
  background-color: #262626;
}
.demo {
  width: 400px;
    margin: 40px auto 0;
}
.pager li {
  display: inline-block;
  line-height: 25px;
}
.pager a {
  display: block;
  color: #f2f2f2;
  text-shadow: 1px 0 0 #101011;
  padding: 0 10px;
  border-radius: 2px;
  box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
  background: linear-gradient(top,#434345,#2f3032);
}
.pager a:hover {
  text-decoration: none;
  box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
  background: linear-gradient(top,#f48b03,#c87100);
}
.pager li:target a {
  box-shadow: 1px 0 5px #1a1a1b inset,1px 0 0 #2d2d2d,0 1px 0 #2d2d2d;
  background: linear-gradient(top,#252627,#1c1c1e);
}

 

                                                                                         

 

 

 Terms of Use

This template is created by SliceMaker staff, all rights are reserved by SliceMaker Soft, Inc.

SliceMaker Soft allows their users to free download the template and then edit it for their own use. If you are interested in this template, please feel free to download it. If you have problem understanding or editing the template, please feel free to contact our support team (support@slicemaker.com) for help.

 

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0