Gradient Pagination - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gradient Pagination</title> <style> body { font-family: 'Arial', sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .gradient-pagination { display: flex; list-style-type: none; padding: 0; margin: 0; background: linear-gradient(45deg, #6a11cb, #2575fc); border-radius: 10px; overflow: hidden; } .gradient-pagination li { margin: 0; } .gradient-pagination a { display: flex; justify-content: center; align-items: center; padding: 10px 20px; color: #fff; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; position: relative; font-size: 1.2em; } .gradient-pagination a:hover { background-color: rgba(255, 255, 255, 0.1); } .gradient-pagination a.active { background-color: rgba(255, 255, 255, 0.3); color: #fff; pointer-events: none; } </style> </head> <body> <ul class="gradient-pagination"> <li><a href="#" class="prev-page">Prev</a></li> <li><a href="#" class="page-number">1</a></li> <li><a href="#" class="page-number">2</a></li> <li><a href="#" class="page-number">3</a></li> <li><a href="#" class="page-number">4</a></li> <li><a href="#" class="page-number">5</a></li> <li><a href="#" class="next-page">Next</a></li> </ul> <script> document.addEventListener('DOMContentLoaded', function() { const pages = document.querySelectorAll('.gradient-pagination a.page-number'); pages.forEach(page => { page.addEventListener('click', function(e) { e.preventDefault(); pages.forEach(p => p.classList.remove('active')); this.classList.add('active'); }); }); const prevPage = document.querySelector('.gradient-pagination a.prev-page'); const nextPage = document.querySelector('.gradient-pagination a.next-page'); const updatePagination = (direction) => { let activePage = document.querySelector('.gradient-pagination a.page-number.active'); if (!activePage) return; let newPage; if (direction === 'prev') { newPage = activePage.parentElement.previousElementSibling?.querySelector('.page-number'); } else if (direction === 'next') { newPage = activePage.parentElement.nextElementSibling?.querySelector('.page-number'); } if (newPage) { activePage.classList.remove('active'); newPage.classList.add('active'); } }; prevPage.addEventListener('click', function(e) { e.preventDefault(); updatePagination('prev'); }); nextPage.addEventListener('click', function(e) { e.preventDefault(); updatePagination('next'); }); }); </script> </body> </html>