The states reflect the HTML states, and there is not “selected” states in HTML. (see the table of pseudo classes here http://www.w3schools.com/css/css_pseudo_classes.asp)
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:
- 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
- set the .background to opacity zero%
- 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.