CSS 开关按钮合集
CSS 开关按钮合集
4 种精美的 CSS 开关按钮设计，包括经典滑块、点阵显示、轨道推拉和木纹风格。
▼ 效果展示
OFF
ON
ON
OFF
OFF
ON
OFF
ON
OFF
ON
纯 CSS 实现的精美开关按钮，无需 JavaScript 即可实现丰富的交互效果。
这集合了 4 种精美的 CSS 开关按钮设计，每种都有独特的风格：经典木纹滑块、带点阵显示的滑块、轨道推拉式开关、以及木纹推拉按钮。所有效果都使用纯 CSS 实现，利用 :checked 伪类和 CSS 动画创造流畅的交互体验。
核心特性
- 纯 CSS 实现：无需 JavaScript，完全使用 CSS 伪类和动画
- 木纹纹理：使用木纹背景图创造真实的木质手感
- 流畅动画：0.4s 过渡时间，丝滑的开关体验
- 多种风格：圆形滑块、点阵显示、轨道推拉等多种设计
- 状态切换：使用
:has()和:checked实现状态管理
完整代码
以下是完整的代码，分为 HTML、CSS 两部分，点击各部分查看：
🎨 CSS 样式
/* 基础样式 */
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 24px;
min-height: 100vh;
font-family: 'Signika', sans-serif;
font-weight: 700;
background-color: #bbb;
}
/* 风格 A: 经典木纹滑块 */
.toggle-container.a {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
border-radius: 50px;
padding: 0 6px;
width: 62px;
height: 28px;
background-color: #bb5555;
box-shadow: inset 0 1px 1px rgb(0 0 0 / .5), 0 1px rgb(255 255 255 / .5);
transition: background-color .4s linear;
}
.toggle-container.a:has(:checked) {
background-color: #5698bb;
}
.toggle-container.a .toggle-input {
position: absolute;
z-index: 2;
inset: 0;
cursor: pointer;
opacity: 0;
}
.toggle-container.a .toggle-handle {
position: absolute;
z-index: 1;
top: 0;
left: 0;
border-radius: 50%;
width: 28px;
height: 28px;
background: url('wood-pattern.png') center/328px 110px;
box-shadow: inset 0 1px 1px rgb(255 255 255 / .75), inset 0 -1px 4px #b75301, 0 1px 4px rgb(0 0 0 / .75);
transition: transform .4s;
}
.toggle-container.a .toggle-input:checked + .toggle-handle {
transform: translateX(34px);
}
/* 风格 B: 带点阵显示 */
.toggle-container.b {
display: flex;
align-items: center;
position: relative;
border-radius: 5px;
width: 72px;
height: 28px;
background-color: #775b40;
box-shadow: inset 0 1px 1px rgb(0 0 0 / .5), 0 1px rgb(255 255 255 / .5);
transition: background-color .4s linear;
}
.toggle-container.b:has(:checked) {
background-color: #5698bb;
}
.toggle-container.b .toggle-handle {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: space-between;
align-content: space-between;
position: absolute;
z-index: 1;
left: 0;
border-radius: inherit;
padding: 9px;
width: 36px;
height: 100%;
transform: translateX(-4px);
background: url('wood-pattern.png') center/328px 110px;
box-shadow: inset 0 1px 1px rgb(255 255 255 / .75), inset 0 -1px 4px #b75301, 0 1px 4px rgb(0 0 0 / .75);
transition: transform .4s;
}
.toggle-container.b .toggle-input:checked + .toggle-handle {
transform: translateX(40px);
}
.toggle-container.b .toggle-handle-dot {
border-radius: 50%;
width: 4px;
height: 4px;
box-shadow: inset 0 1px 1px #ad2201, 0 1px 1px rgb(255 255 255 / .75);
}
/* 风格 C: 轨道推拉式 */
.toggle-container.c {
display: flex;
align-items: center;
column-gap: 16px;
position: relative;
}
.toggle-container.c .toggle-input {
position: absolute;
z-index: 2;
inset: 0;
cursor: pointer;
opacity: 0;
}
.toggle-container.c .toggle-handle {
position: absolute;
left: -5px;
z-index: 1;
border-radius: 50%;
width: 24px;
height: 24px;
background: url('wood-pattern.png') center/328px 110px;
box-shadow: inset 0 1px 1px rgb(255 255 255 / .75), inset 0 -1px 4px #b75301, 0 1px 4px rgb(0 0 0 / .75);
transition: transform .4s;
}
.toggle-container.c .toggle-track {
border-radius: 50px;
width: 52px;
height: 14px;
background-color: #775b40;
}
.toggle-container.c:has(:checked) .toggle-handle {
transform: translateX(35px);
}
/* 风格 D: 木纹推拉 */
.toggle-container.d {
position: relative;
border-radius: 4px;
width: 76px;
height: 32px;
background: linear-gradient(rgb(255 255 255 / .125), rgb(255 255 255 / .125)), url('wood-pattern.png');
background-size: 100% 100%, 328px 110px;
background-position: center;
box-shadow: inset 1px 0 1px rgb(73 31 1 / .25), inset -1px 0 1px rgb(73 31 1 / .25), 0 0 1px rgb(0 0 0 / .5), 0 1px 2px rgb(0 0 0 / .5);
}
.toggle-container.d .toggle-handle {
display: flex;
align-items: center;
position: relative;
border-radius: inherit;
padding: 8px;
width: 70px;
height: inherit;
background: linear-gradient(90deg, rgb(73 31 1 / .125), rgb(255 255 255 / .25), rgb(73 31 1 / .125)), url('wood-pattern.png');
background-size: 200% 100%, 328px 110px;
background-position: 100% 0, center;
box-shadow: inset 0 .5px 1px #e9d38d, inset 1px 0 1px #e9d38d;
transition: transform .4s, background-position .4s;
}
.toggle-container.d .toggle-input:checked + .toggle-handle {
transform: translateX(6px);
background-position: 0 0, center;
}
技术要点
| 技术点 | 说明 |
|---|---|
| :checked 伪类 | 用于检测复选框的选中状态 |
| :has() 伪类 | 父选择器，根据子元素状态改变样式 |
| CSS transitions | 0.4s 过渡时间实现平滑动画 |
| box-shadow | 创造立体感和阴影效果 |
| background-image | 使用木纹纹理图片 |
| CSS Grid | 点阵布局中使用网格排列 |
使用说明
- 将 HTML 结构复制到你的页面中
- 添加对应的 CSS 样式
- 确保木纹图片资源可用（可替换为其他纹理）
- 点击开关即可切换状态
评论