pages css

by twobin

HTML

<div class="pagination"><ul>
<li><a href="javascript:void(0);" class="previouspostslink">&laquo;</a></li>
<li><a href="javascript:void(0);" class="page smaller">1</a></li>
<li><a href="javascript:void(0);" class="page smaller">2</a></li>
<li class="active"><span>3</span></li>
<li><a href="javascript:void(0);" class="page larger">4</a></li>
<li><a href="javascript:void(0);" class="page larger">5</a></li>

<li><a href="javascript:void(0);" class="larger page">6</a></li>
<li><a href="javascript:void(0);" class="larger page">...</a></li>
<li><a href="javascript:void(0);" class="last">&raquo;</a></li>
</ul></div>

CSS

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,textarea,p,blockquote,th,td{
	padding:0;
	margin:0;
}
.pagination a{
	color: #55ADE1;
}

.pagination {
  margin: 30px 0 0 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
}

.pagination ul {
  display: inline-block;
  *display: inline;
  margin-bottom: 0;
  margin-left: 0;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  *zoom: 1;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pagination ul li {
  display: inline;
}

.pagination ul li a,
.pagination ul li span {
  float: left;
  padding: 4px 12px;
  line-height: 20px;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-left-width: 0;
}

.pagination ul li a:hover,
.pagination ul li a:focus,
.pagination ul .active a,
.pagination ul .active span {
  background-color: #55ADE1;
}

.pagination ul .active a,
.pagination ul .active span {
  color: #fefefe;
  cursor: default;
}

.pagination ul li:first-child a,
.pagination ul li:first-child span {
  border-left-width: 1px;
  -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
}

.pagination ul li:last-child a,
.pagination ul li:last-child span {
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
}

.pagination a:hover, .pagination a:focus { color: #fefefe;}