Onclick background color transition in css

Question

here I'm trying to add a background color with a slide transition to a radio button. On active bg color move with slide transition. I tried using transform: translate(); but it is not working. And I don't want to change the HTML. Can anyone suggest to me how can I achieve.

/** Case Switch Button **/

.case-switch-wrap h3 {
  font-family: "Lato", Sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.5px;
  color: #000000;
}

.case-switch {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /*   height: 38px; */
  width: 130px;
  background: #e6e6e6;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0%), 0 1px rgba(255, 255, 255, 10%);
}

.switch-label {
  padding-left: 65px;
  position: relative;
  z-index: 999999999;
}

.switch-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.switch-label .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 65px;
  background: #e6e6e6;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.switch-label input:checked~.checkmark {
  background: #39ccae;
  color: #fff;
}

.switch-label input:checked~.text {
  font-weight: bold;
}

<div class="case-switch">

  <label class="switch-label switch-label-on">
    <input type="radio" class="switch-input" name="switch-toggle" data-ref="on" checked>
    <span class="checkmark">On</span>
    </label>

  <label class="switch-label switch-label-off">
    <input type="radio" class="switch-input" name="switch-toggle" data-ref="off">
      <span class="checkmark">Off</span>
    </label>
</div>

Answer 1

The solution is to use ::after to create a new element that can slide back and forth. I created it after switch-label-off and use translateX to move it back and forth. I adjusted the container case-switch to have a background and border, and removed the rules that were causing a misalignment. I also adjusted the z-index of switch-label-off to be underneath switch-label-on. The rest of the new rules are at the bottom of the css.

/** Case Switch Button **/

.case-switch-wrap h3 {
  font-family: "Lato", Sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.5px;
  color: #000000;
}

.case-switch {
  position: relative;
  /*display: -webkit-box;
  display: -ms-flexbox;
  display: flex;*/
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: start;
  height: 40px;
  width: 130px;
  background: #f0f0f0;
    border : 1px solid #e6e6e6;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0%), 0 1px rgba(255, 255, 255, 10%);
}

.switch-label {
  padding-left: 65px;
  position: relative;
  z-index: 999;
}


.switch-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.switch-label .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 65px;
  background: transparent /* set to transparent */;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}


.switch-label input:checked~.checkmark {
  color: #fff;
}
 
/* set this one to be below the other in z-index */
.switch-label.switch-label-off {
  z-index: 998;
}
/* transition on checkmark color with tiny delay */
.switch-label .checkmark {
  transition: color .3s linear .05s;
}

/* new element to use as our slider */
.switch-label.switch-label-off .checkmark::after {
  content: " ";
  position: absolute;
  top: 0;
  z-index: -100;
  left: 0;
  height: 40px;
  width: 65px;
  background: #39ccae;
  text-align: center;
  border-radius: 4px;
  transform: translateX(-66px);
  transition: transform .3s ease-in-out;
}

.switch-label input:checked~.checkmark::after {
  transform: translateX(0px);
}

.switch-label input:checked~.text {
  font-weight: bold;
}

<div class="case-switch">
  <label class="switch-label switch-label-on">
    <input type="radio" class="switch-input" name="switch-toggle" data-ref="on" checked>
    <span class="checkmark">On</span>
    </label>
  <label class="switch-label switch-label-off">
    <input type="radio" class="switch-input" name="switch-toggle" data-ref="off">
      <span class="checkmark">Off</span>
    </label>
</div>