Pagination Button for Homepage, Archive Page

Hi there,

Something like this should help to get you started:

.wpsp-load-more {
    display: flex;
}
.page-numbers:not(.dots) {
    background-color: #000000;
    color: #ffffff;
    padding: 10px;
}
.page-numbers.dots {
    align-self: flex-end;
}

1. How can I add the hover color?
2. Can you make it separate buttons? They all are combined.
3. Want to reduce the vertical height as well.

1. Try this:

.page-numbers:not(.dots):hover {
    background-color: #000;
    color: #fff;
}

2. The example you've linked looks all combined as well.

Try removing this CSS:

.wpsp-load-more {
    display: flex;
}

3. Modify the padding property in this block of CSS:

.page-numbers:not(.dots) {
    background-color: #000000;
    color: #ffffff;
    padding: 10px;
}

One thing I need to mention that the combined box is only appearing on the homepage.

The same pagination design on the category and tags archive pages look fine.

Thanks. Working great.

No problem :)