CSS 스위치형 버튼 > 퍼블리싱강좌

퍼블리싱강좌

CSS 스위치형 버튼 정보

CSS CSS 스위치형 버튼

첨부파일

switch_button.html (6.0K) 84회 다운로드 2023-01-11 01:52:14

본문

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

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>
추천
5

댓글 4개

본문글 버튼을 잘못 눌러 12월 21일경 썼던 현재 내용의 글이 삭제되었습니다
본인의 실수로 코멘트까지 같이 지워졌으므로
응원의 코멘트를 남기셨던 회원님들께 미안함을 전합니다
전체 283
퍼블리싱강좌 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT