In the reviews widget I would like to replace the “Load more” button with an image from my website
for example
background-image: url('https://mywebsite.com/imgs/myimage.png')
Could you please point me to the css class I need to use
Thank you
In the reviews widget I would like to replace the “Load more” button with an image from my website
for example
background-image: url('https://mywebsite.com/imgs/myimage.png')
Could you please point me to the css class I need to use
Thank you
Hi there, @Mark_Warner1 and welcome aboard ![]()
Sure! Here is the correct code:
[class*="ButtonBase__Overlay-sc"] {
background-image: url('https://mywebsite.com/imgs/myimage.png');
}
Keep in mind that the image should be public accessible to make it work. Check it out and let me know if it helped ![]()
EDIT… Slight issue this also effects the “Review us on Google” button so i need the specific class for the Load more button here is the full css class though for the buttons
[class*=“ButtonBase__Overlay-sc”] {
background-image: url(‘https://fixcookers.co.uk/wip/imgs/ContactForm_Send.png’);
background-size: contain; /* Ensures the entire image is visible /
background-repeat: no-repeat; / Prevents repeating the background image /
background-position: center; / Centers the image within the container /
height: 100px;
width: 100%; / Use 100% to embrace the full width of the container */
overflow: hidden;
}
slight issue this also effects the Review us on google button, so how do i specifically redesign the Load more button ?
Ah, sorry for missing that!
Here is a code that will be applied to the Load More button only ![]()
.es-load-more-button-container [class*="ButtonBase__Overlay-sc"] {
background-image: url('https://fixcookers.co.uk/wip/imgs/ContactForm_Send.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100px;
width: 100%;
overflow: hidden;
}
That is spot on perfect and a super fast response so thank you very much
Amazing, a huge thank you for your kind words!
Don’t hesitate to contact us here again if anything else comes up ![]()