Streaming live at 10am (PST)

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


#1

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:
http://checkbox-hover-click.webflow.io/

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

https://preview.webflow.com/preview/checkbox-hover-click?utm_source=checkbox-hover-click&preview=286d75fecd7fc845b41211800f713518


#2

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:
https://preview.webflow.com/preview/button-hover-and-tap?utm_source=button-hover-and-tap&preview=0b989c878f59ea88f36c8310c4a77b69

Live version:
http://button-hover-and-tap.webflow.io/


#3

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.
https://checkbox-hover-click.webflow.io/

https://preview.webflow.com/preview/checkbox-hover-click?utm_source=checkbox-hover-click&preview=286d75fecd7fc845b41211800f713518


#4

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