html - 使用标签元素创建开关

Question

我想创建这样的开关，我只能从两个选项中选择一个

我可以做这个，但不知道如何叠加它们。.

 <button>Курьер</button><button>Самовывоз</button>

CSS

  button{
                margin-top: 15px; 
                width: 50%;
                height: 25px;
                border-radius: 20px;
                border: none;
                background:
                linear-gradient(to right, #2BD563, #0183D3) no-repeat; 
                color:#fff;
                .reg;
                text-transform: uppercase;
    }

谁能帮忙？

提前致谢!

Answer 1

利用div，有一个主容器 div，里面有一个 div 用于颜色条，另外 2 个 div 用于文本:

let pos = 0;
document.getElementById("container").onclick = function() {
  if (pos == 0)
    pos = 100;
  else
    pos = 0;
  document.getElementById("colour").style.left = pos + "px";
}

#container {
  position: absolute;
  height: 30px;
  width: 200px;
  background: grey;
  border-radius: 15px;
}

#colour {
  position: absolute;
  height: 30px;
  width: 100px;
  left: 0px;
  background: green;
  border-radius: 15px;
  transition: left 0.2s;
}

#text1 {
  position: absolute;
  height: 30px;
  width: 100px;
  left: 0px;
  text-align: center;
}

#text2 {
  position: absolute;
  height: 30px;
  width: 100px;
  right: 0px;
  text-align: center;
}

<div id="container">
  <div id="colour"></div>
  <div id="text1">hello</div>
  <div id="text2">goodbye</div>
</div>

通过控制颜色条的“左”属性，您可以对其进行动画处理，我包含了一些快速 JS 来向您展示如何做类似的事情。