纯css--开关按钮

最新推荐文章于 2024-05-18 10:01:50 发布

Baymini0801

最新推荐文章于 2024-05-18 10:01:50 发布

阅读量575

点赞数

CC 4.0 BY-SA版权

分类专栏：功能篇文章标签： css 开关按钮

本文链接：https://blog.youkuaiyun.com/Baymini0801/article/details/80176835

功能篇专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何仅使用CSS创建具有完整交互效果的开关按钮，涵盖了样式设置、伪类应用以及过渡动画等方面，帮助读者掌握纯CSS实现开关按钮的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML 结构：

css样式：

#toggle-button{
display: none;
}
.button-label{
position: relative;
display: inline-block;
width: 54px;
height: 24px;
border: 1px solid #d2d2d2;
background-color: #fff;
border-radius: 27px;
overflow: hidden;
}
.circle{
position: absolute;
top: 50%;
left: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #d2d2d2;
transform: translateY(-50%);
}
.button-label .text {
line-height: 24px;
font-size: 12px;
}
.on {
color: #fff;
display: none;
text-indent: 8px;
}
.off {
color:#999;
display: inline-block;
text-indent: 32px;
}
.button-label .circle{
left: 4px;
transition: all 0.3s;
}
#toggle-button:checked + label.button-label .circle {
left: 30px;
background-color:#fff;
}
#toggle-button:checked + label.button-label .on{
display: inline-block;
}
#toggle-button:checked + label.button-label .off{
display: none;
}

#toggle-button:checked + label.button-label{
background-color: #5FB878;
border-color: #5FB878;
}