Thread: Ux On/Off Button !

Ohh, I understud . That helped a lot .
Now, I see, so this is a kind of multi-layer *.svg file.

Thanks!

To go further in the analysis of the operation of this button
the svg of the data.zip is thus constituted

Spoiler:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="166px"
height="75px" viewBox="26.81 19.3 166 75" enable-background="new 26.81 19.3 166 75" xml:space="preserve">
<g id="on">
<path fill="#41B140" d="M64.7,94.3c-20.69,0-37.5-16.81-37.5-37.5l0,0c0-20.69,16.81-37.5,37.5-37.5h90.22
c20.69,0,37.5,16.81,37.5,37.5l0,0c0,20.69-16.81,37.5-37.5,37.5H64.7z"/>
<circle fill="#FFFFFF" cx="154.82" cy="56.8" r="35.31"/>
</g>
<g id="disabled_on" opacity="0.2">
<path fill="#41B140" d="M64.7,94.3c-20.69,0-37.5-16.81-37.5-37.5l0,0c0-20.69,16.81-37.5,37.5-37.5h90.22
c20.69,0,37.5,16.81,37.5,37.5l0,0c0,20.69-16.81,37.5-37.5,37.5H64.7z"/>
<circle fill="#FFFFFF" cx="154.82" cy="56.8" r="35.31"/>
</g>
<g id="off">
<path opacity="0.4" fill="#FFFFFF" enable-background="new " d="M64.7,94.3c-20.69,0-37.5-16.81-37.5-37.5l0,0
c0-20.69,16.81-37.5,37.5-37.5h90.22c20.69,0,37.5,16.81,37.5,37.5l0,0c0,20.69-16.81,37.5-37.5,37.5H64.7z"/>
<circle fill="#FFFFFF" cx="65.3" cy="56.8" r="35.31"/>
</g>
<g id="disabled_off" opacity="0.2">
<path opacity="0.4" fill="#FFFFFF" enable-background="new " d="M64.7,94.3c-20.69,0-37.5-16.81-37.5-37.5l0,0
c0-20.69,16.81-37.5,37.5-37.5h90.22c20.69,0,37.5,16.81,37.5,37.5l0,0c0,20.69-16.81,37.5-37.5,37.5H64.7z"/>
<circle fill="#FFFFFF" cx="65.3" cy="56.8" r="35.31"/>
</g>
</svg>

<g id=...> are here, so to speak, individual pictures.

the state and therefore the appearance of each ON/OFF button is defined in template.css

checkbox.listitem.chkonoff, checkbox3.listitem.chkonoff, radio3.listitem.chkonoff {
chktext_on: "on"; chktext_off: "off";
phase_on: "on"; phase_off: "off";
chkspr:"spr_chk_onoff.svg";
}

and in a more comprehensive manner

Spoiler:

checkbox, checkbox3, radio3{
font: "default";
color: chk_radio_color; color2: chk_radio_color2;
fontSize: fontsize_main;
align: "left"; valign: "center";
r2lInvert: 1;
left:0; top:0; right: 0; bottom: 0;
padding: 0; paddingLeft: 0; paddingRight: 0; paddingTop: 0; paddingBottom: 0;
minAspect: 85;
resizeBmp: 1;
preserveAspectRatio: 0;
wordWrap: 1;
onRelease: undef;
enable: 1;
text: "";
dTooltip: "";
iconSpr: "";
img: "";
checked: undef;
iconId: undef;

animate: 0;
img_focus: "";
chkspr: "ico_checkbox.svg";
chkspr_w: undef; chkspr_h: undef; chkspr_align: undef;
icon: undef;
chktext: "";
chktext_on: (m_i18n("on"));
chktext_off: (m_i18n("off"));
phase_on:"on";
phase_off: "off";
phase_disabled_on: "disabled_on";
phase_disabled_off: "disabled_off";
}

it seems that it is possible to change the text displayed from the chktext-on and chktext-off tags, but this remains to be checked and it will be necessary to take into account the translations to be provided in the other languages, the best is to replace "on" with "yes" and "off" with "no" to verify the effects.

Hello,
To add to the controversy over the on/off symbols, here are two new buttons.

Spoiler: 1

[Only registered and activated users can see links. ]
[Only registered and activated users can see links. ]

Spoiler: 2

[Only registered and activated users can see links. ]
[Only registered and activated users can see links. ]

Spoiler: 3(Suggested lunapark)

[Only registered and activated users can see links. ]
[Only registered and activated users can see links. ]

Spoiler: Screenshots

[Only registered and activated users can see links. ] [Only registered and activated users can see links. ]

[Only registered and activated users can see links. ]
[Only registered and activated users can see links. ]
[Only registered and activated users can see links. ]