Oi, posso te dar dicas de como fazer e você mudar o código pra ficar da maneira que você quer

Neste exemplo, a página atual é destacada com uma cor de fundo diferente. A classe active é usada para aplicar o estilo à página atual. Você pode personalizar as cores e estilos conforme suas preferências, alterando os valores das propriedades background-color, color e outros.

Lembre-se de ajustar o número de páginas e adicionar links ou ações aos elementos para que eles funcionem corretamente em seu caso específico.

As setas você pode mudar pra uma imagem svg ou png que você pode baixar da internet.

HTML:

<div class="pagination">
  <span class="arrow" id="prevPage">&larr;</span>
  <span class="page active" id="page1">1</span>
  <span class="page" id="page2">2</span>
  <span class="page" id="page3">3</span>
  <span class="page" id="page4">4</span>
  <span class="dots">...</span>
  <span class="arrow" id="nextPage">&rarr;</span>
</div>

CSS:

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.page, .dots {
  padding: 5px 10px;
  cursor: pointer;
}

.page:hover, .dots:hover {
  background-color: #f2f2f2;
}

.active {
  background-color: #4CAF50;
  color: #fff;
}

.arrow {
  padding: 5px;
  cursor: pointer;
}

.arrow:hover {
  background-color: #f2f2f2;
}

JavaScript:

// Obtém todos os elementos da classe 'page'
const pages = document.querySelectorAll('.page');

// Adiciona um ouvinte de eventos de clique a cada página
pages.forEach(page => {
  page.addEventListener('click', () => {
    // Remove a classe 'active' de todas as páginas
    pages.forEach(page => page.classList.remove('active'));
    
    // Adiciona a classe 'active' à página clicada
    page.classList.add('active');
  });
});

Pode adicionar JavaScript para ao clicar em qualquer número de página, a classe active ser aplicada apenas a esse número, destacando-o com uma cor de fundo diferente. Certifique-se de adicionar o JavaScript acima no seu arquivo HTML, de preferência dentro da tag <script></script> ou em um arquivo JavaScript separado que esteja sendo importado no seu documento HTML.

Lembre-se de ajustar os IDs dos elementos <span> para corresponderem aos IDs usados no código JavaScript, como id="page1", id="page2", etc. Isso permitirá que o JavaScript selecione corretamente os elementos e aplique a classe active quando necessário. Valeu!

Olá!

Muito obrigado pela resolução!

Cumprimentos!