Friday, March 29, 2024

How to Improve Site Navigation with CSS Pagination

In this article, you will learn how to add pagination, an excellent way to navigate sites with a lot of content. The parts of a page are referenced by numbers, arrows, forward and back buttons, etc.

Additional navigation can simplify search on some pages of the site, making it easier for users to search in the site’s archives. Search engines use pagination, the media uses pagination through sections of large articles and weblogs. Pagination is a very useful feature because it provides visitors with quick and convenient navigation through the site.

For best practices, try to keep in mind the following tips:

  • Use primary (first and last) links on the outside
  • Do not use the underline option
  • Use pagination in large areas where you can click
  • Provide previous and next links

It would be ideal for designers to introduce intuitive and creative design elements, making it easy to navigate on the site.

Here is a simple example of using pagination:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
</style>
</head>
<body>
<h2>Example of simple pagination</h2>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>
</body>
</html>

CSSpaginationfig1

Another example of using the hover selector to change the color of each page link as you move your mouse over them:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.pagination { 
    display: inline-block; 
} 
.pagination a { 
    font-weight:bold; 
    font-size:30px; 
    color: black; 
    float: left; 
    padding: 10px 16px; 
    text-decoration: none; 
} 
.pagination a.active {     
    background-color:DimGray ; 
} 
.pagination a:hover:not(.active) { 
    background-color: Gainsboro ; 
    border-radius:15px; 
} 
.PAG { 
    font-size:40px; 
    font-weight:bold; 
    color:DarkSlateGrey; 
    margin-left:100px; 
    margin-bottom:60px; 
} 
.peg { 
    font-size:29px; 
    font-weight:bold; 
    margin-left:40px; 
    margin-bottom:20px; 
} 
</style> 
</head> 
<body> 
<div class = "PAG">CSS Pagination</div> 
<div class = "peg">CSS Hoverable Pagination</div> 
<div class="pagination"> 
  <a href="#">«</a> 
  <a href="#">1</a> 
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a class = "active" href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a> 
  <a href="#">8</a> 
  <a href="#">9</a> 
  <a href="#">10</a> 
  <a href="#">»</a> 
</div> 
</body> 
</html>

CSSpaginationfig2

Here is an example with rounded active and hoverable buttons:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.pagination { 
    display: inline-block; 
} 
.pagination a { 
    font-weight:bold; 
    font-size:30px; 
    color: black; 
    float: left; 
    padding: 10px 16px; 
    text-decoration: none; 
} 
.pagination a.active { 
    border-radius:15px;     
    background-color:DimGray ; 
} 
.pagination a:hover:not(.active) { 
    background-color: Gainsboro ; 
    border-radius:15px; 
} 
.PAG { 
    font-size:40px; 
    font-weight:bold; 
    color:DarkSlateGrey; 
    margin-left:100px; 
    margin-bottom:60px; 
} 
.peg { 
    font-size:29px; 
    font-weight:bold; 
    margin-left:40px; 
    margin-bottom:20px; 
} 
</style> 
</head> 
<body> 
<div class = "PAG">CSS Pagination</div> 
<div class = "peg">CSS Hoverable Pagination</div> 
<div class="pagination"> 
  <a href="#">«</a> 
  <a href="#">1</a> 
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a> 
  <a href="#">5</a>
  <a class = "active" href="#">6</a>
  <a href="#">7</a> 
  <a href="#">8</a> 
  <a href="#">9</a> 
  <a href="#">10</a> 
  <a href="#">»</a> 
</div> 
</body> 
</html>

CSSpaginationfig3

Here is an example of pagination with margins. Use the border property to add margins to pagination:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.pagination { 
    display: inline-block; 
} 
.pagination a { 
    font-weight:bold; 
    font-size:25px; 
    color: black; 
    float: left; 
    padding: 8px 16px; 
    text-decoration: none; 
    border:1px solid grey; 
} 
.pagination a.active { 
    background-color:DimGray ; 
} 
.pagination a:hover:not(.active) { 
    background-color: Gainsboro ; 
} 
.PAG { 
    font-size:40px; 
    font-weight:bold; 
    color:DarkSlateGray ; 
    margin-left:110px; 
    margin-bottom:60px; 
} 
.peg { 
    font-size:24px; 
    font-weight:bold; 
    margin-left:80px; 
    margin-bottom:20px; 
} 
</style> 
</head> 
<body>  
<div class = "PAG">CSS Pagination</div> 
<div class = "peg">Example of bordered pagination</div> 
<div class="pagination"> 
  <a href="#">«</a> 
  <a href="#">1</a> 
  <a href="#">2</a>
  <a class = "active" href="#">3</a>
  <a href="#">4</a> 
  <a href="#">5</a> 
  <a href="#">6</a> 
  <a href="#">7</a> 
  <a href="#">8</a> 
  <a href="#">9</a> 
  <a href="#">10</a> 
  <a href="#">»</a> 
</div>  
</body> 
</html>

CSSpaginationfig4

Now we are writing an example using the hoverable transition effect:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.pagination { 
    display: inline-block; 
} 
.pagination a { 
    font-weight:bold; 
    font-size:30px; 
    color: black; 
    float: left; 
    padding: 10px 16px; 
    text-decoration: none;
    transition: background-color .5s;
} 
.pagination a.active { 
    border-radius:15px;     
    background-color:DimGray ; 
} 
.pagination a:hover:not(.active) { 
    background-color: Gainsboro ; 
    border-radius:15px; 
} 
.PAG { 
    font-size:40px; 
    font-weight:bold; 
    color:DarkSlateGrey; 
    margin-left:100px; 
    margin-bottom:60px; 
} 
.peg { 
    font-size:29px; 
    font-weight:bold; 
    margin-left:40px; 
    margin-bottom:20px; 
} 
</style> 
</head> 
<body> 
<div class = "PAG">CSS Pagination</div> 
<div class = "peg">CSS Hoverable Transition effect</div> 
<div class="pagination"> 
  <a href="#">«</a> 
  <a href="#">1</a> 
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a> 
  <a href="#">5</a>
  <a href="#">6</a> 
  <a href="#">7</a> 
  <a href="#">8</a>
  <a class = "active" href="#">9</a>
  <a href="#">10</a> 
  <a href="#">»</a> 
</div> 
</body> 
</html>

CSSpaginationfig5

Another example of paging using text-align-center:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
}
.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .4s;
  border: 1px solid grey;
  margin: 0 4px;
}
.pagination a.active {
  background-color: grey;
  color: white;
  border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {background-color: Gainsboro;}
</style>
</head>
<body>
<h2>Example of centered pagination</h2>
<div class="center">
  <div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#" class="active">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
  </div>
</div>
</body>
</html>

CSSpaginationfig6

Pagination size example :

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.pagination { 
    display: inline-block; 
} 
.pagination a { 
    font-weight:bold; 
    font-size:30px; 
    color: black; 
    float: left; 
    padding: 10px 16px; 
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    font-size: 18px;
} 
.pagination a.active {     
    background-color:DimGray ; 
} 
.pagination a:hover:not(.active) { 
    background-color: Gainsboro ; 
    border-radius:15px; 
} 
.PAG { 
    font-size:40px; 
    font-weight:bold; 
    color:DarkSlateGrey; 
    margin-left:100px; 
    margin-bottom:60px; 
} 
.peg { 
    font-size:29px; 
    font-weight:bold; 
    margin-left:40px; 
    margin-bottom:20px; 
} 
</style> 
</head> 
<body> 
<div class = "PAG">CSS Pagination</div> 
<div class = "peg">CSS Hoverable Pagination</div> 
<div class="pagination"> 
  <a href="#">«</a> 
  <a href="#">1</a> 
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a class = "active" href="#">7</a>
  <a href="#">8</a> 
  <a href="#">9</a> 
  <a href="#">10</a> 
  <a href="#">»</a> 
</div> 
</body> 
</html>

CSSpaginationfig7

Here is another example of pagination with margins and space between links:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid grey;
  margin: 0 4px;
}
.pagination a.active {
  background-color: DimGrey ;
  color: white;
  border: 1px solid DimGrey ;
}
.pagination a:hover:not(.active) {background-color: grey;}
</style>
</head>
<body>
<h2>Example of pagination with margins</h2>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#" class="active">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>
</body>
</html>

CSSpaginationfig8

Conclusion

So, after reading this article, you should know more about CSS pagination and be able to create the desired design, then convert it into code.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured