How do I create On / Off or toggle buttons?

Design help General
1

I’m fairly new to Webflow so this may be trivial but I am having trouble figuring out how to create On / Off buttons. The pressed state of a button is just the down state, how come there isn’t a ‘selected’ state? For example, I want a user to be able to click on a team logo below and have it show a green background. Once they have selected the teams they can then go to another button to continue. Thanks guys.

No team selected:

Selected team:

2

The states reflect the HTML states, and there is not “selected” states in HTML. (see the table of pseudo classes here CSS Pseudo-classes)

Instead, use Webflow interactions. Webflow team did good in that matter because the CLICK trigger has a First click and Second click option. Perfect for on/off. However, the properties are limited so you can’t directly affect background and border.

here what you can do:

  1. build your element like this:

div class .on-off-icon (set dimensions + position:relative)
---- div class .background position:absolute + 100% height and width + background color and border for the selected state
---- div class .icon position:absolute + 100% height and width
---- ---- team icon, centered

  1. set the .background to opacity zero%
  2. select the parent div (.on-off-icon) and create an interaction. Chose On Click trigger and select “Affect different element”. Check the “limit to nested element”. Set the first click to do a opacity 100% in 300ms ease and the second to opacity 0% 200ms ease, for example.
3

Thank you, Vincent, great idea. You are a magician!

4

Vincent, I’m having trouble getting the background to show up behind the team icon when I select the team. I believe I followed all your steps correctly. Here’s a link to my site, it’s on the Registration page in the NHL pane. I really appreciate your help. Thank you.

https://webflow.com/design/clash?preview=b03d5f0d48a90ae3a4a612b23b2a4869