Interactive Pagination UI | HTML, CSS & JavaScript

<div class="container">
        <div class="grid">
            <div class="card">
                <div class="glow"> </div>
                <h2>1. Page-Based Pagination</h2>
                <p>Traditional numbered pagination commonly used in websites and blogs.</p>
                <div class="pagination" style="margin-bottom: 40px;"><button class="page-btn">←</button> <button
                        class="page-btn active">1</button> <button class="page-btn">2</button> <button
                        class="page-btn">3</button> <button
                        class="page-btn">→</button></div>
                <div class="pagination"><button class="page-btn">←</button> <button
                        class="page-btn active">1</button> <button class="page-btn">2</button> <button
                        class="page-btn">3</button> <button
                        class="page-btn">→</button></div>
                <div class="code">?page=2&limit=10</div>
            </div>
            
            <div class="card">
                <div class="glow"> </div>
                <h2>2. Cursor Pagination</h2>
                <p>Uses unique cursor tokens instead of page numbers.</p>
                <div id="cursorContainer">
                    <div class="scroll-item">Cursor Item 1</div>
                    <div class="scroll-item">Cursor Item 2</div>
                    <div class="scroll-item">Cursor Item 3</div>
                </div>
                <br /> <button id="cursorBtn" class="load-more"> Load Next Cursor → </button>
                <div class="code">?cursor=abc123</div>
            </div>
            
            <div class="card">
                <div class="glow"> </div>
                <h2>3. Infinite Scroll</h2>
                <p>Automatically loads new content when user scrolls.</p>
                <div id="scrollBox" class="scroll-box">
                    <div class="scroll-item">Content Item 1</div>
                    <div class="scroll-item">Content Item 2</div>
                    <div class="scroll-item">Content Item 3</div>
                    <div class="scroll-item">Content Item 4</div>
                    <div class="scroll-item">Content Item 5</div>
                </div>
                <div class="code">Auto Fetch on Scroll</div>
            </div>
            
            <div class="card">
                <div class="glow"> </div>
                <h2>4. Load More Pagination</h2>
                <p>Loads more content after clicking the button.</p>
                <div id="loadContainer">
                    <div class="scroll-item">Product Card 1</div>
                    <div class="scroll-item">Product Card 2</div>
                </div>
                <br /> <button id="loadBtn" class="load-more"> Load More </button>
                <div class="code">Click → Fetch More Items</div>
            </div>
        </div>
    </div>

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
}

body{
    background:
    radial-gradient(circle at top left,#1e293b,#020617 60%);
    color:white;
    min-height:100vh;
    overflow-x:hidden;
    padding:40px 20px;
}

.container{
    max-width:1300px;
    margin:auto;
}

.title{
    text-align:center;
    margin-bottom:50px;
}

.title h1{
    font-size:3.2rem;
    margin-bottom:10px;
    background:linear-gradient(90deg,#38bdf8,#8b5cf6,#ec4899);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.title p{
    opacity:.7;
    font-size:1.05rem;
}

/* GRID */

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:40px;
}

/* CARD */

.card{
    position:relative;
    padding:28px;
    border-radius:28px;
    overflow:hidden;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(16px);
    transition:.45s;
    animation:float 6s ease-in-out infinite;
    min-height: 500px;
}

.card:hover{
    transform:translateY(-10px) scale(1.02);
    border-color:#38bdf8;
    box-shadow:
    0 20px 50px rgba(56,189,248,.2);
}

.card:nth-child(2){
    animation-delay:1s;
}
.card:nth-child(3){
    animation-delay:2s;
}
.card:nth-child(4){
    animation-delay:3s;
}

.glow{
    position:absolute;
    width:220px;
    height:220px;
    background:radial-gradient(circle,#38bdf855,transparent 70%);
    top:-100px;
    right:-100px;
    pointer-events:none;
}

.card h2{
    margin-bottom:14px;
    font-size:1.5rem;
}

.card p{
    opacity:.72;
    line-height:1.7;
    margin-bottom:22px;
}

/* PAGINATION */

.pagination{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.page-btn{
    width:46px;
    height:46px;
    border:none;
    border-radius:14px;
    background:rgba(255,255,255,.08);
    color:white;
    cursor:pointer;
    font-weight:600;
    transition:.35s;
}

.page-btn:hover{
    transform:translateY(-4px);
    background:#38bdf8;
}

.page-btn.active{
    background:linear-gradient(135deg,#38bdf8,#8b5cf6);
}

/* LOAD BUTTON */

.load-more{
    border:none;
    padding:14px 24px;
    border-radius:16px;
    background:linear-gradient(135deg,#38bdf8,#8b5cf6);
    color:white;
    font-weight:600;
    cursor:pointer;
    transition:.35s;
    box-shadow:0 10px 25px rgba(56,189,248,.25);
}

.load-more:hover{
    transform:scale(1.06);
}

/* SCROLL BOX */

.scroll-box{
    height:180px;
    overflow:auto;
    border-radius:18px;
    padding:12px;
    background:rgba(255,255,255,.04);
}

.scroll-box::-webkit-scrollbar{
    width:8px;
}

.scroll-box::-webkit-scrollbar-thumb{
    background:#38bdf8;
    border-radius:20px;
}

.scroll-item{
    padding:15px;
    border-radius:14px;
    background:rgba(255,255,255,.08);
    margin-bottom:12px;
    transition:.35s;
}

.scroll-item:hover{
    transform:translateX(5px);
    background:linear-gradient(135deg,#38bdf8,#8b5cf6);
}

/* CODE */

.code{
    margin-top:20px;
    padding:14px;
    border-radius:16px;
    background:#00000055;
    color:#7dd3fc;
    font-size:.9rem;
    overflow:auto;
}

/* FOOTER */

.footer{
    text-align:center;
    margin-top:60px;
    opacity:.6;
}

/* FLOAT ANIMATION */

@keyframes float{
    0%,100%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-8px);
    }
}

/* RESPONSIVE */

@media(max-width:768px){

body{
        padding:20px 14px;
    }

.title h1{
        font-size:2.3rem;
    }

.card{
        padding:22px;
    }

}

const pageButtons = document.querySelectorAll('.page-btn');

pageButtons.forEach(btn => {

btn.addEventListener('click', () => {

pageButtons.forEach(b => b.classList.remove('active'));

if (btn.innerText !== '←' && btn.innerText !== '→') {
                    btn.classList.add('active');
                }

});

/* =========================
           CURSOR PAGINATION
        ========================= */

const cursorBtn = document.getElementById('cursorBtn');
        const cursorContainer = document.getElementById('cursorContainer');

let cursorPage = 4;

cursorBtn.addEventListener('click', () => {

cursorBtn.innerText = 'Loading...';

setTimeout(() => {

for (let i = 0; i < 3; i++) {

const item = document.createElement('div');

item.className = 'scroll-item';

item.innerText = 'Cursor Item ' + cursorPage++;

cursorContainer.appendChild(item);

}

cursorBtn.innerText = 'Load Next Cursor →';

}, 700);

});

/* =========================
           INFINITE SCROLL
        ========================= */

const scrollBox = document.getElementById('scrollBox');

let infiniteCount = 6;

scrollBox.addEventListener('scroll', () => {

if (
                scrollBox.scrollTop + scrollBox.clientHeight
                >=
                scrollBox.scrollHeight - 5
            ) {

for (let i = 0; i < 3; i++) {

const item = document.createElement('div');

item.className = 'scroll-item';

item.innerText = 'Loaded Item ' + infiniteCount++;

scrollBox.appendChild(item);

}

});

/* =========================
           LOAD MORE
        ========================= */

const loadBtn = document.getElementById('loadBtn');
        const loadContainer = document.getElementById('loadContainer');

let product = 3;

loadBtn.addEventListener('click', () => {

loadBtn.innerText = 'Loading...';

setTimeout(() => {

for (let i = 0; i < 2; i++) {

const item = document.createElement('div');

item.className = 'scroll-item';

item.innerText = 'Product Card ' + product++;

loadContainer.appendChild(item);

}

loadBtn.innerText = 'Load More';

}, 700);

});

- Interactive Pagination UI

Live Preview