Switch button using pure css with custom text

////////////////////// css

.switch-btn {

  position: relative;

  display: inline-block;

  width: 90px;

  height: 34px;

}

.switch-btn .switch input {display:none;}

.switch-btn .slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ca2222;

  -webkit-transition: .4s;

  transition: .4s;

}

.switch-btn .slider:before {

  position: absolute;

  content: "";

  height: 26px;

  width: 26px;

  left: 4px;

  bottom: 4px;

  background-color: white;

  -webkit-transition: .4s;

  transition: .4s;

}

.switch-btn input:checked + .slider {

  background-color: #2ab934;

}

.switch-btn input:focus + .slider {

  box-shadow: 0 0 1px #2196F3;

}

.switch-btn input:checked + .slider:before {

  -webkit-transform: translateX(55px);

  -ms-transform: translateX(55px);

  transform: translateX(55px);

}

/*------ ADDED CSS ---------*/

.switch-btn .on

{

  display: none;

}

.switch-btn .on, .off

{

  color: white;

  position: absolute;

  transform: translate(-50%,-50%);

  top: 50%;

  left: 50%;

  font-size: 10px;

  font-family: Verdana, sans-serif;

}

.switch-btn input:checked+ .slider .on

{display: block;}

.switch-btn input:checked + .slider .off

{display: none;}

.switch-btn .slider.round {

  border-radius: 34px;

}

..switch-btn slider.round:before {

  border-radius: 50%;}

///////////////////////// html

<label class="switch-btn">

    <!--HTML -->

  <input type="checkbox" id="Chk_toggle">

   <div class="slider round">

      <!--Custom text -->

        <span class="on">ON</span>

        <span class="off">OFF</span>

    </div>

</label>

/////////////////   Result