***** CSS *****
.paginacion{margin:0 20px 20px 0; padding:2px}
.paginacion ul{margin:0; padding:0; text-align:right; font-size:16px}
.paginacion li{list-style-type:none; display:inline; padding-bottom:1px}
.paginacion a, .paginacion a:visited{padding:0 5px; border:1px solid #9C3D3D; text-decoration:none; color:#000}
.paginacion a:hover, .paginacion a:active{border:1px solid #9C3D3D; color:#9C3D3D; background:#EFEFEF}
.paginacion a.paginaActual{background:#9C3D3D; color:#FFF !important; border-color:#9C3D3D; font-weight:700; cursor:default}
.paginacion a.deshabilitado, .paginacion a.deshabilitado:hover{background:#FFF; cursor:default; color:#929292; border-color:#929292; font-weight:400 !important}
.paginacion a.anteriorSiguiente{font-weight:700}

***** HTML *****
<div class="paginacion">
  <ul>
    <li><a href="#" class="anteriorSiguiente deshabilitado">« anterior</a></li>
    <li><a href="#" class="paginaActual">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a>...</li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#" class="anteriorSiguiente">siguiente »</a></li>
  </ul>
</div>

***** CSS *****
.paginacion {padding:2px}
.paginacion UL {margin:0; padding:0; text-align:left; /*Set to "right" to right align paginacion interface*/ font-size:16px}
.paginacion LI {list-style-type:none; display:inline; padding-bottom:1px}
.paginacion A, .paginacion A:visited {padding:0 5px; border:1px solid #9aafe5; text-decoration:none; color: #2e6ab1}
.paginacion A:hover, .paginacion A:active {border:1px solid #2b66a5; color:#000; background-color:lightyellow}
.paginacion LI.paginaActual {padding:0 5px; border:1px solid navy; font-weight:bold; background-color:#2e6ab1; color:#FFF}
.paginacion LI.paginaDesactivada {padding:0 5px; border:1px solid #929292; color:#929292}
.paginacion LI.paginaSiguiente {font-weight:bold}
* HTML .paginacion LI.paginaActual, * html .paginacion LI.paginaDesactivada { 
/*IE 6 and below. Adjust non linked LIs slightly to account for bugs*/
margin-right:5px;
padding-right:0;
}

***** HTML *****
<div class="paginacion">
<ul>
<li class="paginaDesactivada">« anterior</li>
<li class="paginaActual">1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a>...</li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li class="paginaSiguiente"><a href="#">siguiente »</a></li>
</ul>
</div>

Enlaces de paginación / Pagination links

css

CSS