Toggle example

custom-tax-toggle.css

#wcvat-toggle {
  margin: 0 4rem;
  padding: 0;
  position: relative;
  border: none;
  height: 1.5rem;
  width: 3rem;
  border-radius: 1.5rem;
  color: #6b7381;
  background: #bdc1c8;
}
#wcvat-toggle:focus,
#wcvat-toggle.focus,
#wcvat-toggle:focus.on,
#wcvat-toggle.focus.on {
  outline: none;
}
#wcvat-toggle:before,
#wcvat-toggle:after {
  line-height: 1.5rem;
  width: 4rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
}
#wcvat-toggle:before {
  content: "Off";
  left: -4rem;
}
#wcvat-toggle:after {
  content: "On";
  right: -4rem;
  opacity: 0.5;
  display: unset;
}
#wcvat-toggle > .handle {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 1.125rem;
  background: #fff;
  transition: left 0.25s;
}
#wcvat-toggle.on {
  transition: background-color 0.25s;
}
#wcvat-toggle.on > .handle {
  left: 1.6875rem;
  transition: left 0.25s;
}
#wcvat-toggle.on:before {
  opacity: 0.5;
}
#wcvat-toggle.on:after {
  opacity: 1;
}
#wcvat-toggle:before,
#wcvat-toggle:after {
  color: #6b7381;
}
#wcvat-toggle.on {
  background-color: #29b5a8;
}

custom-tax-toggle.php

<button id="wcvat-toggle" type="button" class="btn btn-toggle wcvat-toggle-product" data-toggle="button" aria-pressed="false" autocomplete="off">
  <div class="handle"></div>
</button>