Pill Toggle - cpc-true-false 커스텀 토글 버튼 : happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 버튼 > Pill Toggle - cpc-true-false 커스텀 토글 버튼 상세정보

클라우드태그

javascript

HTML

PHP

Api

CSS

ASP

mysql

2022

Slide

jquery

메일링

모듈

갤러리

현재접속자 명

Pill Toggle - cpc-true-false 커스텀 토글 버튼

해피팀

네티즌

소스분류

버튼

다운로드 횟수

1 회

간단설명

scss 문법으로 만들어진 커스텀 토글 버튼입니다.

평가하기

클릭시 애니메이션 효과가 있습니다.

핵심내용은 아래와 같습니다.

.option 컴포넌트 전체 스타일

내부에 fieldset, legend, 라디오 영역을 배치

:before 가짜 요소를 이용해서 선택된 버튼 뒤에 움직이는 배경판을 만듬

:has([value="no"]:checked) 조건으로 "no"가 체크되면 배경판이 오른쪽으로 이동

라디오 input은 실제로는 투명하게 덮어두고, 보이는 건 레이블/박스 스타일

네티즌 의견 이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)

내용

아이디

의견남기기

등록된 의견이 없습니다.