CSS Pagination Examples

CSS Pagination Examples


CSS Pagination 
Example 1 - Creating a simple pagination - 
Output -
Example 2 - Active and Changing on hover Pagination - 
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .pagination {
  display: inline-block;
}

.pagination a {
  color: rgb(20, 168, 168);
  float: left;
  padding: 9px 19px;
  text-decoration: none;
}

.pagination a.onactive {
  background-color: #ffb6e7;
  color: rgb(216, 252, 17);
}

.pagination a:hover:not(.onactive) {
  background-color:antiquewhite;
}
</style>
      </head>
      <body>     
        <h2>Creating A Simple Pagination</h2>
        <div class="pagination">
            <a href="#">&laquo;</a>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#" class="onactive">6</a>
            <a href="#">7</a>
            <a href="#">8</a>
            <a href="#">&raquo;</a>
</div>
</body>
</html>
Output  -
On hover - 
Example -Making borders in between numbers -
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .pagination {
  display: inline-block;
}

.pagination a {
  color: rgb(20, 168, 168);
  float: left;
  padding: 9px 19px;
  text-decoration: none;
  border: 1px solid black;
}

.pagination a.onactive {
  background-color: #ffb6e7;
  color: rgb(216, 252, 17);
}

.pagination a:hover:not(.onactive) {
  background-color:antiquewhite;
}
</style>
      </head>
      <body>     
        <h2>Creating A Simple Pagination</h2>
        <div class="pagination">
            <a href="#">&laquo;</a>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#" class="onactive">6</a>
            <a href="#">7</a>
            <a href="#">8</a>
            <a href="#">&raquo;</a>
</div>
</body>
</html>
Output -
Example - Adding margin between the links -
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .pagination {
  display: inline-block;
}

.pagination a {
  color: rgb(20, 168, 168);
  float: left;
  padding: 9px 19px;
  text-decoration: none;
  border: 1px solid black;
  margin: 0 3px; /* 0 is for top bottom*/
}

.pagination a.onactive {
  background-color: #ffb6e7;
  color: rgb(216, 252, 17);
}

.pagination a:hover:not(.onactive) {
  background-color:antiquewhite;
}
</style>
      </head>
      <body>     
        <h2>Creating A Simple Pagination</h2>
        <div class="pagination">
            <a href="#">&laquo;</a>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#" class="onactive">6</a>
            <a href="#">7</a>
            <a href="#">8</a>
            <a href="#">&raquo;</a>
</div>
</body>
</html>
Output -