Customization of Load More button

Ask the Community Customization
1

I fyou would be so kind as to assist me … I’m trying to style the “Load More” button, like in this thread, but am having a bit of trouble. I’ve gotten this far with my styling, but can’t seem to remove the gray background. Here is an example of what I want the button to look like:

Screenshot 2024-10-22 at 09.19.39
Screenshot 2024-10-22 at 09.19.391900×1912 210 KB

This is the code I’ve created:
[class^=‘ButtonBase__Overlay-sc-’] {
background-color: #23BBCE;
text-transform: uppercase;
padding: 0px;
font-size: 18.2px;
font-weight: 500px;
color: #FFFFFF;
letter-spacing: 0.91px;
border-radius: 300px;
font-family: ‘Rubik’, sans-serif;
}

[class^=‘ButtonBase__Ellipsis-sc-’] {
background-color: #23BBCE;
text-transform: uppercase;
padding: 10.92px 41.86px;
font-size: 18.2px;
font-weight: 500px;
color: #FFFFFF;
letter-spacing: 0.91px;
border-radius: 300px;
font-family: ‘Rubik’, sans-serif;
}

[class^=‘ButtonBase__Container-sc-’] {
background-color: #23BBCE;
text-transform: uppercase;
padding: 0px;
font-size: 18.2px;
font-weight: 500px;
color: #FFFFFF;
letter-spacing: 0.91px;
border-radius: 300px;
font-family: ‘Rubik’, sans-serif;
}

And this is the page where the button is: Testimonials — Swoon Learning - Tutoring & Activities for Student-Athletes

1 Like
3

Hi there, @Cory_Borman :wave:

Please try to add one more code and let me know if it helped:

.es-load-more-button,
.es-load-more-button > span {
  border: none;
  background-color: transparent !important;
}
4

Worked like a charm, thank you!

2 Likes
5

Great! You are most welcome :wink: