Advanced Search

Enlaces de paginación / Pagination links

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. ***** CSS *****
  2. .paginacion{margin:0 20px 20px 0; padding:2px}
  3. .paginacion ul{margin:0; padding:0; text-align:right; font-size:16px}
  4. .paginacion li{list-style-type:none; display:inline; padding-bottom:1px}
  5. .paginacion a, .paginacion a:visited{padding:0 5px; border:1px solid #9C3D3D; text-decoration:none; color:#000}
  6. .paginacion a:hover, .paginacion a:active{border:1px solid #9C3D3D; color:#9C3D3D; background:#EFEFEF}
  7. .paginacion a.paginaActual{background:#9C3D3D; color:#FFF !important; border-color:#9C3D3D; font-weight:700; cursor:default}
  8. .paginacion a.deshabilitado, .paginacion a.deshabilitado:hover{background:#FFF; cursor:default; color:#929292; border-color:#929292; font-weight:400 !important}
  9. .paginacion a.anteriorSiguiente{font-weight:700}
  10.  
  11. ***** HTML *****
  12. <div class="paginacion">
  13.   <ul>
  14.     <li><a href="#" class="anteriorSiguiente deshabilitado">« anterior</a></li>
  15.     <li><a href="#" class="paginaActual">1</a></li>
  16.     <li><a href="#">2</a></li>
  17.     <li><a href="#">3</a></li>
  18.     <li><a href="#">4</a></li>
  19.     <li><a href="#">5</a>...</li>
  20.     <li><a href="#">9</a></li>
  21.     <li><a href="#">10</a></li>
  22.     <li><a href="#" class="anteriorSiguiente">siguiente »</a></li>
  23.   </ul>
  24. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.