Beautiful CSS pagination and how it's done

HTML

For HTML we have a scroller element with pages inside.

Each page element has a class named 'page', and 'active', if that page is currently selected.

<div class="scroller">
    <div class="page">1</div>
    <div class="page">2</div>
    <div class="page active">3</div>
    <div class="page">4</div>
    <div class="page">5</div>
</div>

Javascript

For javascript, we'll select all page elements on load.

Then we'll loop through them and add a click event listener.

On click, we'll remove active class from element that has it and add it to an element that was clicked.

window.onload = () => {
    let pages = document.querySelectorAll('.page')

    for (let i = 0; i < pages.length; i++) {
        pages[i].onclick = () => {
            removeActiveClass()
            setActiveClass(pages[i])
        }
    }
}

Now we'll create previous mentioned functions.

For setActiveClass we'll simply just all a class 'active' to class list.

And for removeActiveClass, we'll just select the element that has 'active' class and remove it.

const setActiveClass = (el) => el.classList.add('active')

const removeActiveClass = () => {
    let activeEl = document.querySelector('.active')
    activeEl.classList.remove('active')
}

Simple, huh?

CSS

For CSS, first we'll style the scroller element.

We'll just align page numbers inside, using flexbox and add some gap between them.

.scroller {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

Now the pages.

We'll set the width and height to 30px with 100% border radius. This will appear as circle.

Using flexbox, we'll center the number inside.

Of course, we'll set transition to 0.5 seconds so that the hover effect (which we'll add later) is smooth.

Lastly, we'll set cursor to pointer and text to white and bold.

.page {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s;
    cursor: pointer;
    color: #fff;
    font-weight: 500;
}

On page hover, we'll just increase it's size using transform scale and add transition so the transform is smooth.

.page:hover {
    transform: scale(1.2);
    transition: .2s;
}

Now we'll set background color to all pages.

Each will have different color. From yellow to brown.

.page:first-child {
    background-color: rgb(255, 225, 0);
}
.page:nth-child(2) {
    background-color: rgb(255, 200, 0);
}
.page:nth-child(3) {
    background-color: rgb(255, 157, 0);
}
.page:nth-child(4) {
    background-color: rgb(255, 123, 0);
}
.page:nth-child(5) {
    background-color: rgb(211, 106, 0);
}

For active page, we'll increase the element's size by 50% using transform property, so that the active page is different.

We'll also change it's background color, to red.

.active {
    transform: scale(1.5);
    background-color: rgb(245, 57, 0) !important;
}

On hover over active page, we'll overwrite the previous transform property from scale 1.2 to scale 1.5 and set the default cursor, so that it doesn't look clickable.

.active:hover {
    transform: scale(1.5);
    cursor: default;
}

And that is it.

Video tutorial:

You can find the whole code with video tutorial here.

Thank you for reading ❤️