Streaming live at 10am (PST)

Is it possible to have click & hover animation on the same element?

I am trying to make a checkbox button, the buttons initial state is Black however when I however over it I want it to be orange, when I hover out I want it to be black again.

I also want to be able to click the button and have it turn green, and if I unclick it goes back to black.

I have applied the above successfully however it is not working, the hover out interaction overrides my mouse click interaction and automatically puts the button back to black even though it is checked and I want it to be green.

Example below:

Checkbox 1 has both interactions applied (hover and click)
Checkbox 2 only has the click interactions applied

Hey @Boris

When you try to use interactions to change the background color with both on tap and on hover in/out, the background color will always go back to the Hover Out state, after you move the mouse out.

If you want the background to remain one color even after hover out, you should create a nested element to cover the actual background color.

I made this example for you:

Live version:

Hey @gilson,

Thanks for your help, your solution worked however now I have another question!

How did you make yours so big and how’d you make your “Checkbox BG” have the same radius as the “Checkbox Field” when selecting the checkbox; I’ve literally copied yours down to the tea and cannot replicate it.

I did a little bit of custom code:
input[type="checkbox"]{ -webkit-appearance: none; appearance: none; }

Thanks again @gilson, I ended up copying this and still no luck! can you see where I went wrong?

Hey @Boris

after the custom code you used, you should be able to style the checkbox within Webflow. The differences from my layout to yours is that I putted the font-size to 40px, instead of the default 14px. That way, when you set the width and height as 1em it should be 40px. But you can just type the width using pixels if you prefer.

The other thing you forgot was to set the Checkbox Field as overflow: hidden, so it will clip the background to the round corners.