토글버튼

checkbox로 구현하는데 디자인을 바꾸면서 checkbox의 기능은 구현하기 위해
label태그로 연결한 뒤 labal태그에 디자인을 구현하고 기존 checkbox는 display: none;처리했다..(접근성 측면에서는 이러면 안되던가 좀더 고민)

정확히 버튼을 클릭하지 않아도 동작하도록 라벨 태그를 배경으로 만들고
::before 요소로 토글 버튼 안쪽을 만들었다.

    #btn:checked + .togle {
        background-color: #70f190;
        box-shadow: 3px 3px 10px 0 #51ac51 inset;
    }

    #btn:checked + .togle::before {
        background-color: white; 
        transform: translateX(40px); 
    }

기능없는 토글버튼은 CSS만 사용해서 구현 가능하기 때문에
#btn:checked + .togle로 체크되었을때의 배경색, 버튼색, 버튼위치를 만들었다.

자연스럽게 바뀌게 하기 위해 기존 디자인에는
transition: background-color 0.3s ease;
transition: transform 0.3s ease;
를 작성해서 시간을 줬다.

기존에 배경색과 버튼색을 동일하게해서 달의 파여진면을 표현했는데
박스셰도우때문에 위쪽이 어색하게 남은 부분을 투명도를 주어 제거했다.

토글버튼구현 코드펜