Button-Label with 2 Pictures (on and off status)

Is it possible with css to fill a button-label with 2 images depending the "on" or "off" status?
Tried Label.on but is not working.

label.on {
  background:url(data:image/png;base64,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);
  no-repeat;
  background-position:center;
  background-size: 70%;
}

label {
  background:url(data:image/png;base64,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);
  no-repeat;
  background-position:center;
  background-size: 70%;
}
border-radius: 5px;
font-size: 70%;
line-height: 8px

Yes, you can use a #{} javascript code block, in the css prop:

label {
  background: url(#{@{this} ? "data:image-on" : "data:image-off" });
}

@{this} refers to the value of the widget itself, considering it's a button and off value is zero (which means a falsy value when evaluated in this ternary operator (you can get the value of another widget using its id instead)
data:image-on is used to represent where you put all the 64base code for when the widget is on.

1 Like

Thanks... I will check that out.