a11y.skipToMainContent
1

CSS 스위치 생성기

순수 CSS를 가진 iOS 스타일의 토글 스위치를 만들기 — 색상, 크기, 라벨 및 애니메이션을 사용자 정의합니다. 대화 형 라이브 미리보기.

px
px
px
px
s

Preview (click to toggle)

HTML

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Switch Generator

  1. 폭, 고도 및 손잡이 크기 슬라이더를 조정하십시오.
  2. 당신의 상표도 일치하기 위하여 온/오프 색깔 및 손잡이 색깔을 놓으십시오.
  3. 선택적으로 스위치 궤도에 눈에 보이는 ON/OFF 상표를 추가하십시오. HTML과 CSS를 복사합니다.

CSS 스위치 생성기은 무엇입니까?

A toggle 스위치는 사용자가 2개의 국가 (on/off) 사이에서 전환하는 UI 통제입니다. 이 도구는 순수 CSS toggle 스위치를 생성하고 상태, 조정 가능한 폭 및 높이, knob sizing, 애니메이션 속도에 대한 customizable 색상.

라이브 미리보기는 대화형이며, 스위치를 토글을 켜고 국가를 차단합니다. 프로젝트에서 드롭 인 사용을 위해 HTML 및 CSS 출력을 모두 복사합니다.

Advertisement

FAQ

전환에 텍스트 라벨을 추가 할 수 있습니까?
예: 'Show label on switch'를 확인하고 knob 내부에 표시된 사용자 지정 ON/OFF 텍스트를 입력하십시오.
애니메이션 스무디?
예, 스위치는 CSS 전환을 사용하여 configurable Animation speed for the polished feel.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

Advertisement