# Button-Style Pagination (SCSS)

> Turns the page numbers under the blog, archives and Query Loop blocks into evenly sized rounded buttons with a clear current-page state.

- Type: SCSS
- Runs: Site-wide header
- Category: [Archives](https://wpide.com/library/category/archive/)
- Tags: scss, pagination, archives
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/pagination-buttons-scss/

## Code

```scss
$accent: #2271b1;
$size: 2.4em;

.nav-links,
.wp-block-query-pagination-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}

.nav-links .page-numbers,
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: $size;
    height: $size;
    padding: 0 0.8em;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    text-decoration: none;

    &:hover,
    &:focus {
        border-color: $accent;
        color: $accent;
    }

    &.current {
        border-color: $accent;
        background: $accent;
        color: #fff;
    }

    &.dots {
        border-color: transparent;
    }
}
```

## Notes

Covers classic theme pagination (.nav-links) and the Query Pagination block.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Button-Style Pagination (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/