This article introduces you to make a beautiful page bar with pure CSS, which can adapt to various mobile screens such as PC and mobile phone. Developers can download the source code and change the css code to customize the style of your own project.
HTML structure
The paging structure consists of two buttons on the previous and next pages on both sides, and a digital page number in the middle. We wrap an unordered list (ul.cd-pagination) with a element. In the unordered list, we add the .button style to the previous and next buttons. In the middle page number, the current page number is represented by the a.current style. If you want to make no gaps between page numbers, add .no-space style to ul. The code structure is as follows:
<nav role="navigation">
<ul class="cd-pagination no-space">
<li class="button"><a class="disabled" href="#0">Pre</a></li>
<li><a class="current" href="#0">1</a></li>
<li><a href="#0">2</a></li>
<li><a href="#0">3</a></li>
<li><a href="#0">4</a></li>
<li><span>...</span></li>
<li><a href="#0">20</a></li>
<li class="button"><a href="#0">Next</a></li>
</ul>
</nav>CSS
First, we center the page breaks and set the width, spacing, and so on. Then set the previous and next pages to always be displayed, and the digital page numbers will be hidden on the small screen like a mobile phone. You can also set the page text size and click effect.
Nav[role="navigation"] {
Text-align: center;
}
.cd-pagination {
Width: 90%;
Max-width: 768px;
Margin: 2em auto 2em;
Text-align: center;
}
.cd-pagination li {
/* Hide numbers on small screens */
Display: none;
Margin: 0 .2em;
}
.cd-pagination li.button {
/* Display the previous and next buttons */
Display: inline-block;
}
.cd-pagination a, .cd-pagination span {
Display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
User-select: none;
/* Set button size */
Padding: .6em .8em;
Font-size: 1rem;
}
.cd-pagination a {
Border: 1px solid #e6e6e6;
Border-radius: 0.25em;
}
.no-touch .cd-pagination a:hover {
Background-color: #f2f2f2;
}
.cd-pagination a:active {
/* Click effect */
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
Transform: scale(0.9);
}
.cd-pagination a.disabled {
/* button is not available */
Color: rgba(46, 64, 87, 0.4);
Pointer-events: none;
}
.cd-pagination a.disabled::before, .cd-pagination a.disabled::after {
Opacity: .4;
}
.cd-pagination .button:first-of-type a::before {
Content: '\00ab ';
}
.cd-pagination .button:last-of-type a::after {
Content: ' \00bb';
}
.cd-pagination .current {
/* Current page number */
Background-color: #64a281;
Border-color: #64a281;
Color: #ffffff;
Pointer-events: none;
}
@media only screen and (min-width: 768px) {
.cd-pagination li {
Display: inline-block;
}
}
@media only screen and (min-width: 1170px) {
.cd-pagination {
Margin: 4em auto 8em;
}
}In addition, we use svg to make the arrow icon. If you want to use the left and right arrows instead of the button text on the previous and next pages, you can use the following code.
.cd-pagination.custom-buttons .button a {
width: 40px;
overflow: hidden;
white-space: nowrap;
text-indent: 100%;
color: transparent;
background-image: url("../img/cd-icon-arrow.svg");
background-repeat: no-repeat;
background-position: center center;
}
.cd-pagination.custom-buttons .button:last-of-type a {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
