JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <input type="radio" name="r" class="radio" id="on" checked>
  <input type="radio" name="r" class="radio" id="off">
  
  <div class="list">
    <label class="btn btn_on" for="on">Да</label><label class="btn btn_off" for="off">Нет</label>
  </div>
</form>

<p><span class="wpcf7-form-control-wrap gates-avto"><span class="wpcf7-form-control wpcf7-radio radio" id="on"><span class="wpcf7-list-item first last"><input type="radio" name="gates-avto" value="Да" checked="checked">&nbsp;<span class="wpcf7-list-item-label">Да</span></span></span></span><br>
<span class="wpcf7-form-control-wrap gates-avto"><span class="wpcf7-form-control wpcf7-radio radio" id="off"><span class="wpcf7-list-item first last"><input type="radio" name="gates-avto" value="Нет">&nbsp;<span class="wpcf7-list-item-label">Нет</span></span></span></span></p>
<div class="list">
<label class="btn btn_on" for="on">Да</label><label class="btn btn_off" for="off">Нет</label>
</div>

CSS

/* Базовые стили */
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background: #964939;
}

/* Cкрываем input[type="radio"] */
.radio {
  display: none;
}

/* Стили для кнопок */
.btn {
  display: inline-block;
  vertical-align: middle;
  width: 80px;
  height: 34px;
  text-align: center;
  padding: .5rem 1rem;  
  color: #fff;
  font-family: sans-serif;
  cursor: pointer;
  position: relative;
}

/* dotted подчеркивание */
.btn:after {
  content: '....';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  transition: all .34s ease-in-out;
}
/* Обертка для кнопок */
.list {
  position: relative;
  display: inline-block;
}
/* Перемещающийся блок */
.list:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 80px;
  height: 38px;
  border: 2px solid #fff;
  border-radius: 25px;
  
  transition: all .34s ease-in-out;
}
/* "Да" */
#on:checked~.list:after {
  transform: translateX(0%);
}

#on:checked~.list .btn_on:after {
  opacity: 0;
}
/* "Нет" */
#off:checked~.list:after {
  transform: translateX(100%);
}
#off:checked~.list .btn_off:after {
  opacity: 0;
}