Customize Pagination Colors

This CSS method can be applied to a page to customize the colors of the pagination buttons that appear within data components such as tables or lists. You can use the code to modify the color attributes of the pagination elements, including the background, border, and text colors.

The image below corresponds to the CSS in that each snippet will change the attributes of a specific button state. The various states can be defined as follows:

1. Default (not active/hover or disabled)
2. Disabled
3. Active or hover

One Easy Step 

Add the following code to the CSS tab of your page.

/* (1) Change buttons (excluding active or disabled)*/
.pagination>li>a {
    background-color: #ADD8E6;
    border-color: #F0F8FF;
    color: #000000;
}

/* (2) Change disabled buttons*/
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
    background-color: #E0FFFF;
    border-color: #F0F8FF;
    color: #000000;
}

/* (3) Change active or hover button color*/
.pagination>.active>a,
.pagination>.active>a:hover,
.pagination>.active>a:focus,
.pagination>li>a:hover,
.pagination>li>a:focus {
    background-color: #87CEFA;
    border-color: #F0F8FF;
    color: #000000;
}

Original Community Post:

Customize Pagination Colors with CSS - Community Discussions / Tips and Tricks - Tadabase Community