Streaming live at 10am (PST)

How do I create On / Off or toggle buttons?

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:

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

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.

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

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.