纯CSS toggle开关按钮

纯CSS toggle开关按钮源码下载

看看谁在用

查看文件结构

文件大小:0.00M

资源分类: 插件-表单和按钮

更新时间: 2021-03-02

css开关按钮样式,可以将普通复选框元素转换为互动切换开关使用纯css代码。

核心CSS代码
.toggle-switch {
  --bar-height: 14px;
  --bar-width: 32px;
  --bar-color: #eee;

  --knob-size: 20px;
  --knob-color: #fff;

  --switch-offset: calc(var(--knob-size) - var(--bar-height));
  --switch-width: calc(var(--bar-width) + var(--switch-offset));

  --transition-duration: 200ms;

  --switch-transition: all var(--transition-duration) ease-in-out;
  --switch-theme-rgb: 26, 115, 232;
  --switch-theme-color: rgb(var(--switch-theme-rgb));
  --switch-box-shadow: 0 0 var(--switch-offset) #11111180;
  --switch-margin: 8px;

  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;

  min-height: var(--bar-height);
  min-width: var(--bar-width);

  margin: var(--switch-margin);
  user-select: none;
}

纯CSS toggle开关按钮

正在加载文件目录...

也许你还喜欢

  1. jQuery开关按钮插件jtoggler
  2. svg心形toggle开关按钮
  3. 创意Toggle按钮飞机跑道
  4. css3 checkbox单选按钮美化特效
  5. css3美化开关toggle按钮样式
  6. jQuery胶囊样式开关按钮
dtsel.js时间日历插件
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备17077179号-2