홈페이지를 만들다 필요한게 있으면 그때 그때 만들어 쓰는데
스위치형 체크 박스가(  예 : 다음 뉴스의 댓글보기 버튼 ) 디자인상 필요한지라 한번 만들어 봤습니다

css로  에니메이션까지 작동 되며 사용하기에 그리 나쁘지는 않을듯 하여 공유합니다
다만 css3 옵션을 사용하다 보니 현재 적용되는 부라우저는 최신 부라우저에서만 동작합니다
이점 미리 공지합니다

아래는 css 소스이며 html은 스타일 안에 규정된 형태처럼 사용하면 됩니다

이러한 소스는 찾아보면 많이 있지만
ON, OFF와 같이 버튼에 필요한 글자를 버튼마다 다르게 넣어서 표현하기에 편하며
작게나마 스위치 볼과 선택시 바탕 화면이 부드럽게 페이드인 페이드 아웃 에니메이션 됩니다


보통 라벨 태그는 두가지 형태로 표현합니다

형식 1 ( 아이디를 포함해서 서로 지정 시킴 )
<label for="태그아이디">사용함</label>
<input type="checkbox" id="태그아이디" value="값">


형식2 ( 라벨 안에 넣어서 아이디 없이 사용 )
<label>사용함
<input type="checkbox" value="값">
</label>

div나 span 또는 button으로 태그를 구성하지 않고 label 태그로 구성한 이유는
형식2를 사용함으로 소스를 줄이고 하나의 덩어리로 취급하기에 용이하며 라벨을 클릭시
라벨을 클릭한 것이기에 체크 박스가 동작 하기 때문입니다




-------------------이하 css 소스 --------------------------------------------------------------------------------




<style>

/*===============================================
** 스위치 버튼 : 시작
** 2022.12.15
** 예 :  보기 감추기 버튼
<label class="switch_bt">
    <div class="switch_label">코멘트 사용</div>
    <div class="switch_zone">
        <input type="checkbox" name="use_comment" data-on="ON" data-off="OFF">
        <span class="switch_boll"></span>
    </div>
</label>
**------------------------------------------------------------------------------------*/

label.switch_bt{position:relative;top:0;display:inline-block;margin:0 20px 0 10px;padding:0;line-height:14px;}
label.switch_bt .switch_zone{position:relative;display:inline-block;}
label.switch_bt input[type='checkbox']{
-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;appearance: none;
position: relative;margin:0;padding:0;height:20px;width:45px;border-radius:50%;border:none;
font-size:10px;line-height:18px;font-weight:bold;letter-spacing:2px;cursor:pointer;
font-family:sans-serif;vertical-align: middle;}
label.switch_bt input[type='checkbox']:focus{border:none;outline: 0 none;box-shadow:none;}

/* 스위치 볼 :  */
label.switch_bt .switch_boll{
position:absolute;top:1px;z-index:3;display:inline-block;
margin:0;padding:0;width:16px;height:calc(100% - 4px);border:1px solid #ccc;border-radius:50%;background:#fff;cursor:pointer;
box-shadow: 1px 0px 2px 1px #ababab, inset 0px 1px 0px 2px rgb(241 241 241 / 60%), inset 0px 0px 0px 2px #cbcbcb;}

/* off */
label.switch_bt input[type='checkbox']:before {content:attr(data-off);
position:absolute;top:0px;left:0px;z-index:1;display:inline-block;margin:0;padding:0px 5px;
height:calc(100% - 2px);width:calc(100% - 12px);background:#dbdbdb;color:#fff;
text-align:right;text-indent:16px;font-weight:bold;letter-spacing:1px;
border-radius:25px;border:1px solid #b9b9b9;opacity:1;transition: all .3s ease;word-spacing:0;}

/* on */
label.switch_bt input[type='checkbox']:after {content:attr(data-on);
position:absolute;top:0px;left:0px;z-index:2;display:inline-block;margin:0;padding:0px 5px;
height:calc(100% - 2px);width:calc(100% - 12px);background: #3fa2ff;color: #fff;
text-align: left;text-indent:0px;font-weight:bold;letter-spacing:1px;
border-radius:25px;border:1px solid #0282fb;opacity:0;transition: all .3s ease;word-spacing:0;}

/* on시 동작 변경 */
label.switch_bt input[type='checkbox']:checked:before{opacity:0;transition: all .3s ease;}
label.switch_bt input[type='checkbox']:checked:after{opacity:1;transition: all .3s ease;}

/*off 체크 안되어 있을 때  볼 무빙 */
label.switch_bt:has(input[type='checkbox']:not(:checked)) .switch_boll{
left:1px;transition: all .3s ease;transform: rotate(0deg);}
/*on 체크 되어 있을 때 볼 무빙 */
label.switch_bt:has(input[type='checkbox']:checked) .switch_boll{
left:calc(100% - 18px);transition: all .3s ease;transform: rotate(540deg);}

/* 라벨 대행 */
.switch_label{position: relative;display:inline-block;color:#303030;
font-weight: bold;margin: 0px 5px 0px 0px;
-ms-user-select: none;-moz-user-select: -moz-none;
-khtml-user-select: none;-webkit-user-select: none;user-select: none;
vertical-align: middle;font-size: 14px;cursor:pointer;}
/*-----------------------------------------------
** 스위치 버튼 : 끝
**=============================================*/
 
 
/*
** ON, OFF가 아닌 다른 text를 사용하고 크기가 더 넓어야 할 경우 아래 처럼 넓이, 높이, 폰트사이즈, 라인높이와 볼의 크기, 볼의 위치점 등을 맞추어서
** class를 하나 더 만들것
**
** 아래는 두번째 스위치 버튼인
** <label class="switch_bt wide1"> 처럼 wide1이라는 클래스를 만들어 넓이와 높이가 다른 형태를 추가해 준 css임
**
** 2번째 예제 : 높이 50px 넓이 150픽셀인 스위치 버튼
**
*/
.switch_bt.wide1 input[type='checkbox']{width:150px;height:50px;font-size:20px;line-height:50px;}

/* 버튼 볼 버튼 본체의 높이보다 4픽셀 작게 테두리값 그림자 값 만큼 작게 */
label.switch_bt.wide1 .switch_boll{width:46px;height:46px; }

/* 체크되었을때 볼의 위치 볼 넓이 보다 패딩값-1픽셀 작게 위치*/
label.switch_bt.wide1:has(input[type='checkbox']:checked) .switch_boll {left: calc(100% - 49px);}

/* 활성 비활성 글자 위치 조절 before=>비활성 */
label.switch_bt.wide1 input[type='checkbox']:before{
width: calc(100% - 22px); /* 패딩값과 보더값 만큼 빼준다 */
padding: 0px 10px;
}
/* 활성 비활성 글자 위치 조절 before=>비활성, after=>활성*/
label.switch_bt.wide1 input[type='checkbox']:after{
width: calc(100% - 22px);
padding: 0px 10px;
}
</style>







------------ 스위치 버튼 ---------------

<label class="switch_bt">
    <div class="switch_label">코멘트 사용</div>
    <div class="switch_zone">
        <input type="checkbox" name="use_comment" data-on="ON" data-off="OFF">
        <span class="switch_boll"></span>
    </div>
</label>

<br>
----------------------------------------------------------------------------
<br>
<label class="switch_bt wide1">
    <div class="switch_label">활성 선택시</div>
    <div class="switch_zone">
        <input type="checkbox" name="use_button" data-on="활성" data-off="비활성" checked>
        <span class="switch_boll"></span>
    </div>
</label>