About this snippet

Navigate through large datasets with this clean pagination component. The rounded buttons and clear active state help users understand exactly where they are in your list of results.

Size
1012 bytes
Uses
HTML, CSS
Loads
Nothing external
Views
532

Collections

Related snippets

<div class="pagination-wrapper">
  <a href="#" class="page-link prev">&lsaquo;</a>
  <a href="#" class="page-link active">1</a>
  <a href="#" class="page-link">2</a>
  <a href="#" class="page-link">3</a>
  <span class="dots">...</span>
  <a href="#" class="page-link">12</a>
  <a href="#" class="page-link next">&rsaquo;</a>
</div>
.pagination-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #4b5563;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s;
  background: #fff;
  border: 1px solid #e5e7eb;
}
.page-link:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}
.page-link.active {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}
.dots {
  color: #9ca3af;
  padding: 0 5px;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save