[css] toggle 버튼 만들기

form요소를 이용해서 toggle버튼 만들기

<div class="toggle">
            <label class="switch-button">
                <input type="checkbox" />
                <span class="onoff-switch"></span>
            </label>
        </div>

✅html
1) checkbox formr과 빈 span 작성

.toggle{
    margin: 0 100px;
    display: flex;
    align-items: center;
}
.switch-button {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 30px;
}

.switch-button input {
    opacity: 0;
    width: 0;
    height: 0;
}

.onoff-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius:20px;
    background-color: #ccc;
    transition: .4s;
}

.onoff-switch:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    transition: .4s;
    border-radius:20px;
}

.switch-button input:checked + .onoff-switch {
    background-color: #723ead;
}

.switch-button input:checked + .onoff-switch:before {

    transform: translateX(26px);
}

✅css
1) 각 버튼을 원하는 모양으로 설정해준다
2) input checkbox는 opacity0으로 눈에 보이지 않게 해준다
3) 빈 span은 원형 버튼이 움직이는 배경으로 만들어주고 transiton을 걸어준다
4) checkbox에 check됐을 경우 배경이 바뀔 수 있게 background color를 설정한다
5) checkbox에 check됐을 경우 움직일 수 있게 transform을 걸어준다

 

☑️https://rara-code.tistory.com/20?category=1072320

토글 버튼이용하여 테마바꾸기 참고

[jquery] toggle버튼 이용하여 테마바꾸기

✔ toggle버튼 내에 아이콘같은 것을 넣어 줄 수도 있다