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 .

{姓名}是什么来着?

a toggle switch是允许用户在两个状态(上/下)之间切换的UI控制. 此工具生成纯 CSS 切换开关, 开关和关关有自定义的颜色, 可调整宽度和高度, knob sizing, 以及动画速度 。

现场预览是交互式的——单击开关切换到开关和关闭状态之间. 复制 HTML 和 CSS 两种输出, 供您的工程中使用。

Advertisement

FAQ

我能在开关上加上文字标签吗?
是 — 请检查“ 开关上显示标签” , 并输入 knob 内出现的自定义 ON/ OFF 文本 .
动画顺利吗?
是的,开关使用可配置动画速度的 CSS 转换器来表示被打磨的感觉.

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