Remove buttons hover effect on mobile only

Site URL: https://watermelon-sponge-6pkp.squarespace.com/

Hi,

I would like to remove the hover effect on all the buttons on my website but only on mobile layout.

Any suggestions? Thanks!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div.button-block a:hover {
    opacity: 1 !important;
}
}

2 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div.button-block a:hover {
    opacity: 1 !important;
}
}

 

Thank you for the reply!
I've implemented it but the hover effect sill seems to be there

On 5/9/2022 at 5:29 PM, Sitar said:

Thank you for the reply!
I've implemented it but the hover effect sill seems to be there

That code for Button Block.

Can you share link to page where you still have problem?

On 5/11/2022 at 11:13 AM, tuanphan said:

That code for Button Block.

Can you share link to page where you still have problem?

https://jolin.tech/shop/p/vactrols-are-illegal-unisex-tee

on chrome android the button text gets highlighted. In mobile desktop it doesn't happen. That's why I would like to get rid of the hover effect on mobile

think I've fixed it

/* remove hover buttons on mobile */
@media screen and (max-width:767px) {
div.sqs-button-element--primary:focus {
    opacity: 1 !important;
}
}