How to Create Pagination with CSS
Pagination is an ordinal numbering of pages, usually located at the top or bottom of the site pages. Pagination helps search engine bots to index the articles and rank them.
In this snippet, we will show how to create Pagination with HTML and CSS. Also, we will offer you creative examples. Let’s see how to create standard pagination and then apply various styles.
Create HTML
- Create a <div> tag with a class name "pag".
- Create <a> tags to add numbers of the pages. Give one of the tags "active" class name.
<div class="pag">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a class="active" href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">»</a>
</div>Add CSS
- Give color to the numbers and use the float property to define on which side of the container the elements should be placed.
- Create padding space. Here, the first value sets the top and bottom sides, and the second one sets the right and left sides. Also, set the text-decoration property to "none".
- Style the "active" class by giving it a background-color and specifying the color of the number.
- Specify a background-color for all the <a> tags except for the "active" class by using the :hover and :not() pseudo-classes.
.pag a {
color: #000000;
float: left;
padding: 12px 18px;
text-decoration: none;
}
.pag a.active {
background-color: #8ebf42;
color: #ffffff;
}
.pag a:hover:not(.active) {
background-color: #cccccc;
}Here’s the full example of a standard pagination with CSS.
Example of creating standard pagination:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.pag {
clear: both;
content: "";
display: table;
margin: 0 10px 10px;
}
.pag a {
color: #000000;
float: left;
padding: 12px 18px;
text-decoration: none;
}
.pag a.active {
background-color: #8ebf42;
color: #ffffff;
}
.pag a:hover:not(.active) {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>Pagination</h2>
<div class="pag">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a class="active" href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">»</a>
</div>
</body>
</html>Result
Example of creating rounded and hoverable pagination:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.pag {
display: inline-block;
}
.pag a {
color: black;
float: left;
padding: 12px 18px;
text-decoration: none;
}
.pag a.active {
background-color: #060185;
color: white;
border-radius: 50%;
}
.pag a:hover:not(.active) {
background-color: #cbcadb;
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Pagination</h2>
<div class="pag">
<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="#">»</a>
</div>
</body>
</html>Example of creating hoverable and active pagination:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
font-family: "Arial", sans-serif;
font-size: 12px;
}
body {
display: flex;
align-items: center;
}
.pager__item {
display: inline-block;
vertical-align: top;
font-size: 15px;
font-weight: bold;
margin: 0 2px;
}
.pager__item.active .pager__link {
background-color: #7a0052;
color: #fff;
text-decoration: none;
}
.pager__link {
position: relative;
border-radius: 5px;
display: block;
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
color: #2f3640;
text-decoration: none;
transition: 0.2s;
}
.pager__link:hover,
.pager__link:focus,
.pager__link:active {
background-color: #efdcf7;
color: #fff;
text-decoration: none;
}
@media screen and (max-width: 576px) {
.pager__item {
position: absolute;
top: -9999px;
left: -9999px;
}
}
</style>
</head>
<body>
<div class="wrapper">
<nav>
<ul class="pager">
<li class="pager__item"><a class="pager__link" href="#">«</a></li>
<li class="pager__item"><a class="pager__link" href="#">...</a></li>
<li class="pager__item"><a class="pager__link" href="#">1</a></li>
<li class="pager__item active"><a class="pager__link" href="#">2</a></li>
<li class="pager__item"><a class="pager__link" href="#">3</a></li>
<li class="pager__item"><a class="pager__link" href="#">4</a></li>
<li class="pager__item"><a class="pager__link" href="#">5</a></li>
<li class="pager__item"><a class="pager__link" href="#">6</a></li>
<li class="pager__item"><a class="pager__link" href="#">...</a></li>
<li class="pager__item"><a class="pager__link" href="#">»</a></li>
</ul>
</nav>
</div>
</body>
</html>Another example of beautiful pagination created with <li> tag.
Example of creating pagination with the <li> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex {
width: 400px;
height: 80px;
line-height: 80px;
background-color: #eeeeee;
position: absolute;
top: 15%;
left: 40%;
margin: -25px 0 0 -150px;
}
.flex ul {
display: flex;
padding: 0;
margin: 0;
box-shadow: 0 10px 20px 0 #cccccc;
}
.flex ul li {
flex: 1;
list-style: none;
text-align: center;
position: relative;
font-size: 20px;
font-weight: bold;
transition: 0.3s ease;
cursor: pointer;
user-select: none;
}
.flex ul li:hover {
background-color: rgba(255, 255, 255, 0.25);
color: #65bcc9;
}
.flex ul li:hover:nth-of-type(2) ~ .bar {
left: 20%;
}
.flex ul li:hover:nth-of-type(3) ~ .bar {
left: 40%;
}
.flex ul li:hover:nth-of-type(4) ~ .bar {
left: 60%;
}
.flex ul li:hover:nth-of-type(5) ~ .bar {
left: 80%;
}
.flex ul .bar {
width: 20%;
background-color: #2696a6;
height: 5px;
position: absolute;
left: 0;
bottom: 0;
transition: 0.3s ease;
}
</style>
</head>
<body>
<div class="flex">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<div class="bar"></div>
</ul>
</div>
</body>
</html>Another nice tooltip pagination example. Tooltip pagination is a plain design with dots.
Example of creating tooltip pagination:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #070e6b;
}
.pagination {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 15px;
margin: auto;
text-align: center;
}
.pagination__dot {
position: relative;
width: 12px;
height: 12px;
border: 2px solid #8a0e9e;
border-radius: 50%;
display: inline-block;
cursor: pointer;
margin: 0 5px;
transition: .3s;
}
.pagination__dot--active {
background: #8a0e9e;
}
.pagination__dot:hover {
transition: .3s;
border-color: #eeeeee;
background: #eeeeee;
}
.pagination__dot:hover:before {
top: -48px;
opacity: 1;
}
.pagination__dot:hover:after {
top: -18px;
opacity: 1;
}
.pagination__dot:before {
position: absolute;
top: -40px;
left: -36px;
background: #eeeeee;
width: 80px;
font-family: "Montserrat";
font-size: 16px;
padding: 8px 0;
border-radius: 5px;
content: attr(data-tooltip);
opacity: 0;
transition: .2s;
}
.pagination__dot:after {
position: absolute;
width: 0;
height: 0;
top: -10px;
left: -2px;
border-top: 8px solid white;
border-right: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
content: "";
opacity: 0;
transition: .2s;
}
</style>
</head>
<body>
<div class="pagination">
<div data-tooltip="Tooltip 1" class="pagination__dot pagination__dot--active"></div>
<div data-tooltip="Tooltip 2" class="pagination__dot"></div>
<div data-tooltip="Tooltip 3" class="pagination__dot"></div>
<div data-tooltip="Tooltip 4" class="pagination__dot"></div>
<div data-tooltip="Tooltip 5" class="pagination__dot"></div>
</div>
</body>
</html>