[CSS] input type="checkbox" ON/OFF 스위치 버튼 디자인

<StyledSwitch>
  <input type="checkbox" />
  <span></span>
</StyledSwitch>

  & {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 30px;

    & > input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    & > span {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 20px;
      background-color: #ccc;
      box-shadow: inset 1px 5px 1px #999;
      border-radius: 20px;
      transition: 0.4s;
    }
    & > span:before {
      position: absolute;
      content: "";
      height: 22px;
      width: 22px;
      left: 4px;
      bottom: 4px;
      background-color: #fff;
      transition: 0.4s;
      border-radius: 20px;
    }
    & > input:checked + span {
      background-color: #f85b90; 
      box-shadow: inset 1px 5px 1px #bc476e; 
    }
    & > input:checked + span:before {
      transform: translateX(26px);
    }
  }

See the Pen Untitled by uxuisooa (@uxuisooa) on CodePen.

 

 

참고한 

https://ordinary-code.tistory.com/53