以下按钮切换需求如何实现？

Question

两个按钮 选中是红底白字 未选中是白底黑字
按钮来回切换的时候红色背景左右滑动
中间状态时候，红色背景上方的字为白色，未在红色背景上方的字为黑色
（可以在许多场景中看到这样的效果）

如何实现，尽量不涉及js
谢谢～

Answer 1

<style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      ul,
      ol {
        list-style: none;
      }
      ul {
        display: inline-flex;
        height: 50px;

        position: relative;
        background-color: #fff;
      }

      li {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        min-width: 100px;
      }

      .item {
        position: relative;
        z-index: 1;
      }

      .child {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: relative;
        transition: color 0.2s;
      }

      .bg {
        position: absolute;
        left: 0;
        top: 0;

        height: 100%;
        background-color: red;
        z-index: 0;
      }

      .item.active .child {
        color: #fff;
      }
    </style>

<ul>
      <li class="item active">
        <div class="child">1</div>
      </li>
      <li class="item">
        <div class="child">2</div>
      </li>
      <li class="item" style="margin-left: 10px;width:200px;">
        <div class="child">3</div>
      </li>
      <li class="item">
        <div class="child">4</div>
      </li>

      <li class="bg"></li>
    </ul>

    var els = Array.from(document.querySelectorAll('li:not(.bg)'));

      var bg = document.querySelector('.bg');

      els.forEach((el, index) => {
        el.addEventListener('click', function() {
          bg.style.transform = `translateX(${el.offsetLeft}px)`;

          bg.style.width = el.offsetWidth + 'px';

          el.classList.add('active');
          els
            .filter(item => item !== el)
            .forEach(node => node.classList.remove('active'));
        });
      });

      bg.style.width =
        els.filter(item => item.classList.contains('active'))[0].offsetWidth +
        'px';

      bg.style.transition = '0.2s';

Answer 2

<div class="btn-box">
    <p class="btn on">转入</p>
    <p class="btn">转出</p>
    <p class="btn-bg"></p>
</div>

*{
    margin:0;
}
.btn-box{
  display:-webkit-box;
  position:relative;
  background: #fff;
}
.btn{
  width:150px;
  height:40px;
  line-height: 40px;
  text-align: center;
  position:relative;
  z-index:1;
}
.btn.on{
  color:#fff;
}
.btn-bg{
  width:150px;
  height:40px;
  background: red;
  -webkit-transition:.2s;
  position:absolute;
  left: 0;
  z-index: 0;
}
.btn-bg.on{
  -webkit-transform:translateX(100%);
}

$('.btn').on('click',function(){
  var idx=$(this).index();
  $('.btn').removeClass('on');
  $(this).addClass('on')
  if(idx>0){
    $('.btn-bg').addClass('on')
  }else{
    $('.btn-bg').removeClass('on')
  }
})