Change style of button on hover for Carousel List

Hi,

I'm looking for more control over the Carousel List buttons when I hover onto them, as it seems that by default they just get slightly darker.

I'd like to change the button colour and text colour mainly.

When not on hover, the button's background is set to 0% opacity and the text is a specific light-green colour. The idea is to have a 100% filled light-green background and black text on hover.

Site: https://grouper-fiddle-acdd.squarespace.com/

Password: ZxsZ9YW7Y5tUhCU

Thanks!

Thanks so much @tuanphan! That worked great! The only thing that still bothered me was that Squarespace's default 'darkening' of the button on hover was still there, but I just added the line:

opacity:1!important;

at the end of the code and now it looks exactly the way I want it. Here's the code below:

a.list-item-content__button.sqs-block-button-element.sqs-block-button-element--medium.sqs-button-element--primary:hover {
    background-color: #f1f !important;
    border-color: #f1f !important;
    color: #000 !important;
    opacity:1!important;
}

Thanks again @tuanphan, much appreciated!