纯CSS实现开关按钮切换效果简洁易用
segmentfault 发布时间：2023-10-11 14:33:58 作者：Winn 
我要评论
我要评论这篇文章主要为大家介绍了纯CSS实现开关按钮切换效果简洁易用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
效果图预览
完整代码如下
<!DOCTYPE html>
<html>
<head>
<title>纯css编写开关按钮点击切换</title>
<style type="text/css">
#toggle-button{
display: none;
}
.button-label{
position: relative;
display: inline-block;
width: 80px;
background-color: #ccc;
border: 1px solid #ccc;
border-radius: 30px;
cursor: pointer;
}
.circle{
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
}
.button-label .text {
line-height: 30px;
font-size: 18px;
/*
用来阻止页面文字被选中，出现蓝色
可以将下面两行代码注释掉来查看区别
*/
-webkit-user-select: none;
user-select: none;
}
.on {
color: #fff;
display: none;
text-indent: 10px;
}
.off {
color: #fff;
display: inline-block;
text-indent: 53px;
}
.button-label .circle{
left: 0;
transition: all 0.3s;/*transition过度，时间为0.3秒*/
}
/*
以下是checked被选中后，紧跟checked标签后面label的样式。
例如：div+p 选择所有紧接着<div>元素之后的<p>元素
*/
#toggle-button:checked + label.button-label .circle{
left: 50px;
}
#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: #33FF66;
}
</style>
</head>
<body>
<input type="checkbox" id="toggle-button">
<!--label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input-->
<label for="toggle-button" class="button-label">
<span class="circle"></span>
<span class="text on">开</span>
<span class="text off">关</span>
</label>
</body>
</html>知识点
1. label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input
2. (:checked + 紧邻其后面标签) 的选择器。例如：#toggle-button:checked + label 解释：当id为toggle-button的checked为选中状态时，就选择紧邻其后的label标签
3. user-select: none;这个属性用来阻止页面文字被选中，如果不添加此属性，点击切换开关时，开/关 二字有时候会被选中，出现蓝色背景，如下图：
以上就是纯css编写开关按钮点击切换效果实现的详细内容，更多关于css开关按钮点击切换的资料请关注脚本之家其它相关文章！
相关文章
- 今天小编给大家带来一个小demo，使用纯css3代码实现switch滑动开关按钮效果，非常实用，感兴趣的朋友可以参考下2016-08-30
- 这篇文章主要介绍了使用CSS3编写类似iOS中的复选框及带开关的按钮,需要的朋友可以参考下2016-04-11
这篇文章主要介绍了使用CSS实现按钮边缘跑马灯动画,技术上只使用了css+html,还是非常容易学习的，文中提供了详细的代码,需要的朋友可以参考下2023-04-2836种漂亮的CSS3网页按钮Button样式(主要结合before与after)
这篇文章主要介绍了36种漂亮的CSS3网页按钮Button样式，主要结合before与after,需要的朋友可以参考下2023-03-25
按钮在开发中使用的频率非常的高，ui 框架中的按钮组件也都是层出不穷，今天教大家仅用 css 实现一些非常炫酷的按钮效果，感兴趣的朋友跟随小编一起学习吧2023-02-28
本文基于一些高频出现在设计稿中的，使用 CSS 实现稍微有点难度和技巧性的按钮，讲解使用 CSS 如何尽可能的实现它们，让我们一起看看使用 CSS 轻松实现一些高频出现的奇形2021-12-01
这篇文章主要介绍了使用CSS3实现按钮悬停闪烁动态特效,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-08-25
这篇文章主要介绍了CSS3 实现的图片悬停切换效果，帮助大家更好的理解和学习使用CSS3，感兴趣的朋友可以了解下2021-04-13
这篇文章主要介绍了CSS3 制作的彩虹按钮样式，帮助大家更好的理解和学习使用CSS3制作特效，感兴趣的朋友可以了解下2021-04-09
这篇文章主要介绍了CSS3点击按钮圆形进度打钩效果的实现代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-30
最新评论