css切换按钮制作

CSS切换按钮制作方法

基础HTML结构

创建一个简单的切换按钮需要HTML复选框元素和对应的标签：

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

基本CSS样式

通过CSS隐藏原生复选框并创建自定义外观：

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

激活状态样式

当复选框被选中时改变滑块位置和背景色：

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

添加文字指示

可以在按钮上显示ON/OFF文字：

.slider:after {
  content: "OFF";
  color: white;
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 70%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked + .slider:after {
  content: "ON";
  left: 30%;
}

方形切换按钮变体

修改border-radius属性可创建方形按钮：

.square .slider {
  border-radius: 0;
}

.square .slider:before {
  border-radius: 0;
}

小尺寸版本

通过调整尺寸参数创建更小的切换按钮：

.small-switch {
  width: 40px;
  height: 24px;
}

.small-switch .slider:before {
  width: 16px;
  height: 16px;
}

.small-switch input:checked + .slider:before {
  transform: translateX(16px);
}

平滑过渡效果

添加transition属性使切换更流畅：

.slider, .slider:before {
  transition: all 0.3s ease;
}

禁用状态样式

为禁用状态添加视觉反馈：

input:disabled + .slider {
  opacity: 0.5;
  cursor: not-allowed;
}

暗黑模式适配

添加prefers-color-scheme媒体查询：

@media (prefers-color-scheme: dark) {
  .slider {
    background-color: #555;
  }
}

这些方法可以根据具体需求组合使用，创建各种样式的CSS切换按钮。通过调整颜色、尺寸和过渡效果，可以匹配不同的设计风格。