toggle button with 2 labelled values

Issue

i need help with css work for making a switch with 2 labelled values.toggle button with 2 labelled values

Please let me know if anyone can help with this toggle switch css.

I tried using the below code but it doesnt work properly.

the toggle which is ON is highlighted the toggle which OFF is non-highlighted.

<div id="app-cover">
  <div class="row">
    <div class="toggle-button-cover">
      <div class="button-cover">
        <div class="button r" id="button-1">
          <input type="checkbox" class="checkbox" />
          <div class="knobs"></div>
          <div class="layer"></div>
        </div>
      </div>
    </div>
  </div>
</div>

/* CSS rules are kept repetitive so that you can get CSS rules for each button easily :) */

* {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

*:focus {
  outline: none;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background-color: #f1f9f9;
}

#app-cover {
  display: table;
  width: 600px;
  margin: 80px auto;
  counter-reset: button-counter;
}

.row {
  display: table-row;
}

.toggle-button-cover {
  display: table-cell;
  position: relative;
  width: 500px;
  height: 140px;
  box-sizing: border-box;
}

.button-cover {
  height: 100px;
  margin: 20px;
  background-color: #fff;
  box-shadow: 0 10px 20px -8px #c5d6d6;
  border-radius: 4px;
}

.button-cover:before {
  counter-increment: button-counter;
  content: counter(button-counter);
  position: absolute;
  right: 0;
  bottom: 0;
  color: #d7e3e3;
  font-size: 12px;
  line-height: 1;
  padding: 5px;
}

.button-cover,
.knobs,
.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button {
  position: relative;
  top: 50%;
  width: 25%;
  height: 36px;
  margin: -20px auto 0 auto;
  overflow: hidden;
}

.button.r,
.button.r .layer {
  border-radius: 100px;
}

.button.b2 {
  border-radius: 2px;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs {
  z-index: 2;
}

.layer {
  width: 100%;
  background-color: #ebf7fc;
  transition: 0.3s ease all;
  z-index: 1;
}

/* Button 1 */
#button-1 .knobs:before {
  content: "Recurring Transfer";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 100px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #03a9f4;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#button-1 .checkbox:checked + .knobs:before {
  content: "One Time";
  left: 42px;
  background-color: #f44336;
}

#button-1 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}

#button-1 .knobs,
#button-1 .knobs:before,
#button-1 .layer {
  transition: 0.3s ease all;
}

Solution

.buttonWarpper {
   position: relative;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   width: fit-content;
   border: 3px solid #f02d1f;
   border-radius: 20px;
   background: #f02d1f;
   color: #f02d1f;
   cursor: pointer;
 }
 .buttonWarpper::before {
   content: '';
   position: absolute;
   width: 50%;
   height: 100%;
   left: 0%;
   border-radius:20px;
   background: white;
   transition: all 0.3s;
 }
 .checkBox:checked + .buttonWarpper::before {
    left: 50%;
 }
 .buttonWarpper div {
   padding: 10px;
   text-align: center;
   z-index: 1;
 }
 .checkBox {
   display: none;
 }
 .checkBox:checked + .buttonWarpper div:first-child{
   color: white;
   transition: color 0.5s;
 }
 .checkBox:checked + .buttonWarpper div:last-child{
   color: #f02d1f;
   transition: color 0.5s;
 }
 .checkBox + .buttonWarpper div:first-child{
   color: #f02d1f;
   transition: color 0.3s;
 }
 .checkBox + .buttonWarpper div:last-child{
   color: white;
   transition: color 0.5s;
 }

<input type="checkbox" id="toggle" class="checkBox" />
<label for="toggle" class='buttonWarpper'>
  <div>left</div>   
  <div>right</div>
</label>

Answered By - Hezy Ziv