iphone常用的開關鍵，其實很簡單！

HTML

使用input的checkbox

<input id="toggle" class="toggle__input" type="checkbox"></input>
<label for="toggle" class="toggle__label"></label>

CSS

先設定外觀樣式

.toggle__input{
  visibility: hidden;
  pointer-events: none;
}

.toggle__label{
  display: inline-block;
  width: 60px;
  height: 30px;
  border: 2px solid lightgrey;
  border-radius: 30px;
  background: #ffe4e4;
  cursor: pointer;
  
  position: relative;
}

使用偽元素來製作按鈕

.toggle__label::before{
  content:'off';
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #af4154;
  border-radius: 50%;
  color: #fff;
  line-height: 30px;
  text-align: center;
  font-size: 15px;

對原先的按鈕定位

  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(0);
  
  transition: 1s;
}

當按鈕狀態為checked時，旋轉到下一個位置

.toggle__input:checked + .toggle__label{
  background: #bedce3;
}

.toggle__input:checked + .toggle__label::before{
  content:'on';
  background: #0b7fab;
  left: 30px;
  transform: rotate(360deg);
}

這樣就完成了呦～！！