Product Page Mobile VARIANT BUTTONS

Hi everyone, 

I need a bit help with my product page when on mobile.

I use buttons to select variants, and for default it has an hover effect, I'm ok with the effect when using it on desktop. But on mobile, it does something weird, where the hover effect colour remains active once it has been selected. I want it to be black, like the ADD TO CART BUTTON.

So my question is, is there any way to deactivate or change the colour of the hover effect for VARIANTS ON MOBILE ONLY?

Thank you so much!

My website: https://www.gastonduflos.com/shop/p/bondi-beach-print-ap001

Thank you as always! @tuanphan

You can add this to Website Tools (under Not Linked) > Custom CSS

/* Variant buttons on mobile */
@media screen and (max-width:767px) {
.variant-option label.sqs-button-element--secondary {
    background-color: black !important;
}
}

Thanks @tuanphan this code made all of the buttons full black on mobile.

I do want them to look light grey like in the desktop version , my problem is with the hover effect colour. It remains active once it has been selected. I want it to be black, like the ADD TO CART BUTTON, but only the selected button and hover effect for the selected button on mobile. Can we do this? Thank you!

Thank you so much!

My website: https://www.gastonduflos.com/shop/p/bondi-beach-print-ap001

Thank you as always! @tuanphan

Use this code

@media screen and (max-width:767px) {
.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked+label {
    background-color: #000 !important;
}
}