As entries of films, books, and blog posts are being added to the website, it’s time for me to set up pagination or a load more button. This will reduce load time, improve navigation, and enhance the overall user experience for visitors who want to find something or skim through the website. Having too many items on one page might look good visually and give an overwhelming feeling of content, but nobody wants to scroll too much or swipe their phone screen vigorously to find the content they want.

For the design, I’m using circle buttons for pagination and rectangular buttons for the load more feature. The colors and hover styles are matched for design consistency.

For the hover effect, I needed to make a few CSS tweaks in Bricks Builder to get the transition effect working properly, since just using the :hover state doesn’t work as intended. I inspected the code to target the pagination button directly and created a class for it in case I want to change the color of all pagination buttons later.

The load more button is easier to style and apply effects to, as I only need to apply the style to the hover state of the elements while ensuring the color remains consistent with the pagination button. It’s the little details that matter.

Here are my notes on colors for these buttons:

//normal state
background-color: var(--gray-25);
border: solid 1px var(--gray-100);
color: var(--gray-600); //or var(--gray-950)

//hover state
background-color: var(--gray-100);

//current/focused state:
background-color: var(--gray-100);
border: solid 1px var(--gray-300);