Html code
<div class='pagination'>
<div class='pagination__inner'>
<a href="#" disabled><i class="fas fa-chevron-left"></i></a>
<ul>
<li class="active"><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a></li>
<li><a href='#'>4</a></li>
<li><a href='#'>5</a></li>
<li><a href='#'>6</a></li>
<li><a href='#'>7</a></li>
<li><a href='#'>8</a></li>
<li>...</li>
<li><a href='#'>41</a></li>
</ul>
<a href=#><i class="fas fa-chevron-right"></i></a>
</div>
</div>
scss code
body {
font-family: verdana, arial, sans-serif;
}
.pagination {
padding: 3em 0;
&__inner {
display: flex;
justify-content: center;
align-items: center;
[disabled] {
cursor: none;
opacity: .5;
}
a {
display: block;
text-decoration: none;
padding: 5px 7px;
transition: all .2s;
color: #000;
&:hover {
color: salmon;
}
}
ul {
margin: 0 10px;
padding: 0;
li {
display: inline-block;
&.active, &:hover {
cursor: pointer;
a {
background: rgba(0, 0, 0, 0.1);
color: salmon;
}
}
a {}
}
}
}
}
compiled css code (If your don’t prefer scss)
body {
font-family: verdana, arial, sans-serif;
}
.pagination {
padding: 3em 0;
}
.pagination__inner {
display: flex;
justify-content: center;
align-items: center;
}
.pagination__inner [disabled] {
cursor: none;
opacity: .5;
}
.pagination__inner a {
display: block;
text-decoration: none;
padding: 5px 7px;
transition: all .2s;
color: #000;
}
.pagination__inner a:hover {
color: salmon;
}
.pagination__inner ul {
margin: 0 10px;
padding: 0;
}
.pagination__inner ul li {
display: inline-block;
}
.pagination__inner ul li.active, .pagination__inner ul li:hover {
cursor: pointer;
}
.pagination__inner ul li.active a, .pagination__inner ul li:hover a {
background: rgba(0, 0, 0, 0.1);
color: salmon;
}
code pen version
See the Pen Basic Pagination using html scss by Polo Dev Shibu (@polo-dev-shibu) on CodePen.