Create Stylish Pagination with HTML and Pure CSS (Source Code)

Faraz

By Faraz -

Learn how to create pagination in HTML effortlessly with our step-by-step guide. No need for JavaScript – just pure CSS for a clean design!

Join us on Telegram
Create Stylish Pagination with Pure CSS.jpg
Read AlsoCreating a BMI Calculator from Scratch with HTML, CSS, and JavaScript.jpgCreating a BMI Calculator from Scratch with HTML, CSS, and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Preview
  5. Conclusion

Pagination is a crucial element in web design, enhancing user experience by breaking down content into manageable sections. In this tutorial, we'll explore creating a simple, stylish pagination system using only HTML and CSS.

Join My Telegram Channel to Download the Project Source Code: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our pagination.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Here's a breakdown of the code:

1. <!DOCTYPE html>: Specifies the HTML version and document type.

2. <html lang="en">: Defines the root element of the HTML document with the language set to English.

3. <head>: Contains meta-information about the HTML document, such as character set, viewport settings, and the title of the page.

  • <meta charset="UTF-8">: Specifies the character encoding as UTF-8.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">: Sets the X-UA-Compatible meta tag for Internet Explorer compatibility.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design.
  • <title>Pure CSS Pagination</title>: Sets the title of the webpage.
  • <link rel="stylesheet" href="styles.css">: Links an external CSS file named "styles.css" to the HTML document for styling.

4. <body>: Contains the content of the web page.

  • <input>: Creates radio input elements with different IDs (page1-input, page2-input, etc.) and the same name attribute, forming a group of radio buttons. The checked attribute is used on the first input to initially select it.
  • <div class="page-wrapper">: Wraps the content and navigation elements.
  • <div class="content">: Contains multiple pages, each represented by a <div class="page"> element. Each page contains six <div class="item"></div> elements.
  • <div class="navigation">: Represents the pagination navigation.
  • <div class="navigation-wrapper">: Wraps the navigation items.
  • <div class="arrow arrow-left">: Represents the left arrow for navigation.
  • <span><</span>: Displays the left arrow symbol.
  • Labels associated with radio inputs are used for navigation triggers.
  • <label>: Represents individual navigation items for each page.
  • <div class="arrow arrow-right">: Represents the right arrow for navigation.
  • <span>></span>: Displays the right arrow symbol.
  • Labels associated with radio inputs are used for navigation triggers.

This is the basic structure of our pagination using HTML, and now we can move on to styling it using CSS.

Read AlsoCreate Interactive Magic Wand Reveal Card Layout HTML CSS JavaScript.jpgCreate Interactive Magic Wand Reveal Card Layout using HTML, CSS, and JavaScript

Step 2 (CSS Code):

Once the basic HTML structure of the pagination is in place, the next step is to add styling to the pagination using CSS.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our pagination.

Let's break down the code section by section:

1. Global Styles:

  • body: Sets the font family, margin, and overflow for the entire document.
  • *, *:before, *:after: Applies the box-sizing: border-box; property to all elements.

2. Input Styles:

  • input: Styles input elements to be hidden and not interactable.

3. Page Wrapper:

  • .page-wrapper: Styles a container for the main content with a flex layout, background color, padding, and a box shadow.

4. Content Section:

  • .content: Defines the styling for the content section within the page wrapper.

5. Page Items:

  • .page .item: Styles individual items within a page, specifying background color, box shadow, dimensions, and margins.
  • There are specific styles for items in each page (page1, page2, ..., page5) with different background colors.

6. Navigation Bar:

  • .navigation: Styles the navigation bar with a flex display, background color, height, padding, and box shadow.
  • .navigation-wrapper: Styles the wrapper for navigation items.
  • .navigation-wrapper .nav-item div: Styles individual navigation items with a circular background and other properties.
  • .navigation .arrow: Styles the navigation arrows with background color, height, width, and other properties.
  • .navigation:before: Creates a circular background element for the navigation bar.

7. Navigation Interactivity:

  • Adds styles for hover effects on navigation items and arrows.
  • Uses transitions to create smooth color changes on hover.

8. Page Transitions and Animations:

  • Defines styles and animations for hiding and showing page items when a specific input is checked.
  • Uses keyframe animations (hidePageItem1, hidePageItem2, ..., showPageItem) for smooth transitions.

9. Media Queries:

  • Hides navigation arrows on screens with a maximum width of 480px.

10. Label Display for Navigation Arrows:

  • Displays specific labels for navigation arrows based on the checked input.

This will give our pagination an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

body {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  margin: 0;
  overflow: hidden;
}

*, *:before, *:after {
  box-sizing: border-box;
}

input {
  display: none;
  opacity: 0;
  height: 0;
  width: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fbfbfb;
  padding: 40px;
  height: 100vh;
  width: 100vw;
  box-shadow: 0 0 120px -50px #ff00004d inset;
}

.content {
  position: relative;
  background-color: #f3f3f3;
  height: calc(100% - 60px);
  width: 100%;
  max-width: 991px;
}

.page {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  top: 20px;
  left: 20px;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
}

.page .item {
  background-color: #d7d7d7;
  box-shadow: 0 0 15px -12px rgb(0 0 0 / 21%), 0 0 30px -21px rgb(61 14 14 / 44%) inset;
  height: calc((100% - 20px) / 2);
  width: calc((100% - 40px) / 3);
  margin-right: 20px;
  margin-bottom: 20px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.page1 .item {
  background-color: #d6e9d6;
}

.page2 .item {
  background-color: #e9d6d6;
}

.page3 .item {
  background-color: #d6e0e9;
}

.page4 .item {
  background-color: #e5d6e9;
}

.page5 .item {
  background-color: #e9e7d6;
}

.page .item.item:nth-child(3n) {
  margin-right: 0;
}

.navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: rgb(231, 231, 231);
  height: 60px;
  padding: 10px 60px;
  width: 100%;
  max-width: 991px;
  box-shadow: 0 0 3px -7px black inset;
  user-select: none;
}

.navigation-wrapper {
  display: flex;
}

.navigation-wrapper .nav-item div {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f3f3f3;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.322), 0 0 2px #000000, 0 0 2px #000000, 0 0 1px #000000, 0 0 1px #000000, 0 0 1px #000000, 0 0 1px #000000;
  height: 36px;
  width: 36px;
  background-color: #626fbf;
  border-radius: 50%;
  margin: 0 6px;
  font-weight: 600;
  transition: background-color 0.21s cubic-bezier(0.23, 1, 0.320, 1);
}

.navigation:before {
  content: '';
  position: absolute;
  background-color: rgb(231, 231, 231);
  border-radius: 50%;
  height: 80px;
  width: 78px;
  left: 0;
  top: -10px;
  right: 0;
  margin: 0 auto;
}

.navigation .nav-item {
  position: relative;
  cursor: pointer;
  z-index: 1;
}

.navigation .nav-item div {
  transition: background-color 0.135s ease-out;
}

.navigation .nav-item:hover div,
.navigation .arrow:hover {
  background-color: rgb(127, 127, 219);
}

.navigation .arrow {
  background-color: #626fbf;
  color: #ffffff;
  position: absolute;
  height: 60px;
  width: 60px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.21s cubic-bezier(0.23, 1, 0.320, 1);
  z-index: 1;
}

.navigation .arrow span {
  transform: scale(1, 1.82);
  font-weight: 600;
  font-size: 17px;
  text-shadow: 0 0 1px #000000;
}

.navigation .arrow label {
  height: 100%;
  width: 100%;
  position: absolute;
  cursor: pointer;
  left: 0;
}

.navigation .arrow-left {
  left: 0;
}

.navigation .arrow-right {
  right: 0;
}

#page1-input:checked ~ .page-wrapper .nav-page1 div,
#page2-input:checked ~ .page-wrapper .nav-page2 div,
#page3-input:checked ~ .page-wrapper .nav-page3 div,
#page4-input:checked ~ .page-wrapper .nav-page4 div,
#page5-input:checked ~ .page-wrapper .nav-page5 div {
  background-color: #38448d;
  transform: scale(1.06);
}

.blocker {
  position: absolute;
  background: red;
  opacity: 0.5;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.page .item:nth-child(1) {
  animation: hidePageItem1 0.86s forwards;
  opacity: 1;
}

@keyframes hidePageItem1 {
  0% {
    transform: none
  } 48% {
    background-color: white;
  } 100% {
    transform: skew(8deg, 10deg) rotate(-40deg) translate(-80%, 150%) scale(0.12);
    background-color: white;
    opacity: 0;
  }
}

.page .item:nth-child(2) {
  animation: hidePageItem2 0.86s 0.09s forwards;
  opacity: 1;
}

@keyframes hidePageItem2 {
  0% {
    transform: none
  } 48% {
    background-color: white;
  } 100% {
    transform:  translate(0, 150%) scale(0.12);
    background-color: white;
    opacity: 0;
  }
}

.page .item:nth-child(3) {
  animation: hidePageItem3 0.86s 0.18s forwards;
  opacity: 1;
}

@keyframes hidePageItem3 {
  0% {
    transform: none;
  } 48% {
    background-color: white;
  } 100% {
    transform: skew(-8deg, -10deg) rotate(40deg) translate(80%, 150%) scale(0.12);
    background-color: white;
    opacity: 0;
  }
}

.page .item:nth-child(4) {
  animation: hidePageItem4 0.86s 0.27s forwards;
  opacity: 1;
}

@keyframes hidePageItem4 {
  0% {
    transform: none;
  } 48% {
    background-color: white;
  } 100% {
    transform: skew(8deg, 10deg) rotate(-40deg) translate(0, 75%) scale(0.12);
    background-color: white;
    opacity: 0;
  }
}

.page .item:nth-child(5) {
  animation: hidePageItem5 0.86s 0.36s forwards;
  opacity: 1;
}

@keyframes hidePageItem5 {
  0% {
    transform: none;
  } 48% {
    background-color: white;
  } 100% {
    transform:  translate(0, 75%) scale(0.12);
    background-color: white;
    opacity: 0;
  }
}

.page .item:nth-child(6) {
  animation: hidePageItem6 0.86s 0.45s forwards;
  opacity: 1;
}

@keyframes hidePageItem6 {
  0% {
    transform: none;
  } 48% {
    background-color: white;
  } 100% {
    transform: skew(-8deg, -10deg) rotate(40deg) translate(0, 75%) scale(0.12);
    background-color: white;
    opacity: 0;
  }
}

#page1-input:checked ~ .page-wrapper .page1 .item,
#page2-input:checked ~ .page-wrapper .page2 .item,
#page3-input:checked ~ .page-wrapper .page3 .item,
#page4-input:checked ~ .page-wrapper .page4 .item,
#page5-input:checked ~ .page-wrapper .page5 .item {
  opacity: 0;
  pointer-events: initial;
  z-index: 0;
  animation: showPageItem 0.38s forwards
}

@keyframes showPageItem {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  } 88% {
    opacity: 1;
  } 100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

#page1-input:checked ~ .page-wrapper .page1 .item:nth-child(1),
#page2-input:checked ~ .page-wrapper .page2 .item:nth-child(1),
#page3-input:checked ~ .page-wrapper .page3 .item:nth-child(1),
#page4-input:checked ~ .page-wrapper .page4 .item:nth-child(1),
#page5-input:checked ~ .page-wrapper .page5 .item:nth-child(1) {
  animation-delay: 0.45s;
}

#page1-input:checked ~ .page-wrapper .page1 .item:nth-child(2),
#page2-input:checked ~ .page-wrapper .page2 .item:nth-child(2),
#page3-input:checked ~ .page-wrapper .page3 .item:nth-child(2),
#page4-input:checked ~ .page-wrapper .page4 .item:nth-child(2),
#page5-input:checked ~ .page-wrapper .page5 .item:nth-child(2) {
  animation-delay: 0.52s;
}

#page1-input:checked ~ .page-wrapper .page1 .item:nth-child(3),
#page2-input:checked ~ .page-wrapper .page2 .item:nth-child(3),
#page3-input:checked ~ .page-wrapper .page3 .item:nth-child(3),
#page4-input:checked ~ .page-wrapper .page4 .item:nth-child(3),
#page5-input:checked ~ .page-wrapper .page5 .item:nth-child(3) {
  animation-delay: 0.59s;
}

#page1-input:checked ~ .page-wrapper .page1 .item:nth-child(4),
#page2-input:checked ~ .page-wrapper .page2 .item:nth-child(4),
#page3-input:checked ~ .page-wrapper .page3 .item:nth-child(4),
#page4-input:checked ~ .page-wrapper .page4 .item:nth-child(4),
#page5-input:checked ~ .page-wrapper .page5 .item:nth-child(4) {
  animation-delay: 0.66s;
}

#page1-input:checked ~ .page-wrapper .page1 .item:nth-child(5),
#page2-input:checked ~ .page-wrapper .page2 .item:nth-child(5),
#page3-input:checked ~ .page-wrapper .page3 .item:nth-child(5),
#page4-input:checked ~ .page-wrapper .page4 .item:nth-child(5),
#page5-input:checked ~ .page-wrapper .page5 .item:nth-child(5) {
  animation-delay: 0.73s;
}

#page1-input:checked ~ .page-wrapper .page1 .item:nth-child(6),
#page2-input:checked ~ .page-wrapper .page2 .item:nth-child(6),
#page3-input:checked ~ .page-wrapper .page3 .item:nth-child(6),
#page4-input:checked ~ .page-wrapper .page4 .item:nth-child(6),
#page5-input:checked ~ .page-wrapper .page5 .item:nth-child(6) {
  animation-delay: 0.8s;
}

.page-wrapper .navigation .arrow label {
  display: none;
}

#page1-input:checked ~ .page-wrapper .navigation .arrow-right label[for="page2-input"] {
  display: block;
}

#page2-input:checked ~ .page-wrapper .navigation .arrow-left label[for="page1-input"],
#page2-input:checked ~ .page-wrapper .navigation .arrow-right label[for="page3-input"] {
  display: block;
}

#page3-input:checked ~ .page-wrapper .navigation .arrow-left label[for="page2-input"],
#page3-input:checked ~ .page-wrapper .navigation .arrow-right label[for="page4-input"] {
  display: block;
}

#page4-input:checked ~ .page-wrapper .navigation .arrow-left label[for="page3-input"],
#page4-input:checked ~ .page-wrapper .navigation .arrow-right label[for="page5-input"] {
  display: block;
}

#page5-input:checked ~ .page-wrapper .navigation .arrow-left label[for="page4-input"] {
  display: block;
}

@media (max-width: 480px) {
  .navigation .arrow {
    display: none;
  }
}

Final Output:

Create Stylish Pagination with Pure CSS.gif
Read Alsohow to create morphing submit button using css.pngCreate a Morphing Submit Button with HTML, CSS, and JS

Conclusion:

Congratulations! You've now mastered the art of creating a functional and stylish pagination system without relying on JavaScript.

Feel free to customize and implement this pagination on your website, and elevate the user experience with a clean and efficient design.

Code by: Henrique F. Schwingel

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: pagination, html, css, source code, html pagination tutorial, pure css pagination, how to implement pagination in html, css pagination styles, step-by-step html pagination
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post