Hover out button interrupting my click animation

Hi all,

I am trying to create a checkbox button with some interactivity.

Hover:
I have currently configured one button to be 60% opacity when the page is loaded, however, if the button is hovered it will increase opacity to 100% but on “hover-out” it will decrease back to 60%

Click:
I have configured the same button to have a click function, so when it is clicked, the checkbox will obviously tick and the opacity also increase to 100%, I have configured the second click to decrease opacity to 60% in case it was accidentally clicked.

Problem:
The hover feature I configured interferes with the click feature, even though the checkbox is ticked, if you hover-out the opacity of the button still decreases to 60% which is not what I want when the user has ticked the option they want.

Webflow found below:
https://preview.webflow.com/preview/boriss-first-project-6281dc?preview=7f488e513e5fc136ae27f7efa4e10196

Any help is appreciated, I’ve put in a fair bit of time trying to figure this out and no success - I am new to webflow so I’m positive that there is a lot of things I haven’t tried, just hoping it’s an easy fix for someone more experienced!

TIA

I’m guessing this is not possible? :frowning:

Maybe you can use CSS hover (not IX) for the hover effect, then make a click interaction for the opacity lock. first click go to 100, second click back to 60.

Thanks Vincent, I’ll try and play around with that - haven’t used CSS in a while!