<label class="radikalwp-tg-word"><input type="checkbox" checked><span class="radikalwp-tg-word-track"><span class="radikalwp-tg-word-on">روشن<//span><span class="radikalwp-tg-word-off">خاموش<//span><span class="radikalwp-tg-word-knob"><//span><//span><//label>

.radikalwp-tg-word { display: inline-flex; cursor: pointer; }
.radikalwp-tg-word input { display: none; }
.radikalwp-tg-word-track {
  position: relative;
  display: flex;
  align-items: center;
  width: 84px;
  height: 34px;
  padding: 0 12px;
  background: #94a3b8;
  border-radius: 999px;
  transition: background .3s ease;
}
.radikalwp-tg-word-on, .radikalwp-tg-word-off {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  transition: opacity .3s ease;
}
.radikalwp-tg-word-on { margin-left: 26px; opacity: 1; }
.radikalwp-tg-word-off { margin-right: 24px; opacity: 0; position: absolute; right: 14px; }
.radikalwp-tg-word-knob {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .3);
  transition: transform .3s ease;
}
.radikalwp-tg-word input:checked + .radikalwp-tg-word-track { background: #22c55e; }
.radikalwp-tg-word input:checked + .radikalwp-tg-word-track .radikalwp-tg-word-knob { transform: translateX(-50px); }
.radikalwp-tg-word input:checked + .radikalwp-tg-word-track .radikalwp-tg-word-on { opacity: 0; }
.radikalwp-tg-word input:checked + .radikalwp-tg-word-track .radikalwp-tg-word-off { opacity: 1; }