自定义胶囊按钮

最新推荐文章于 2024-09-12 10:45:28 发布

人语西风

最新推荐文章于 2024-09-12 10:45:28 发布

阅读量1.6k

点赞数 2

分类专栏： html 文章标签： html css js

本文链接：https://blog.csdn.net/qq_43615903/article/details/105527774

版权

html 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了一个开关按钮的设计思路及其实现过程，包括HTML、CSS样式定义和JavaScript交互逻辑，展示了如何创建一个美观且功能完善的开关控件，并介绍了如何通过隐藏的表单元素向后端传递开关状态。

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

效果图

在这里插入图片描述

html

<a href="javascript:;" class="capbtn ">
    <i class="left-circle"></i>
</a>

css

      .capbtn{
            display: inline-block;
            height: 20px;
            width: 40px;
            position: relative;
            border-radius: 20px;
            background-color: rgb(215, 216, 218);
        }
        .check{
            background-color: rgb(23, 230, 23);
        }
        .capbtn>.left-circle{
            position: absolute;
            display: inline-block;
            width: 17px;
            height: 80%;
            border-radius: 50%;
            left: 2px;
            top: 2px;
            background-color: #fff;
        }
        .capbtn>.right-circle{
            position: absolute;
            right: 2px;
            top: 2px;
            display: inline-block;
            width: 17px;
            height: 80%;
            border-radius: 50%;        
            background-color: #fff;
        }

js

<script src="./js/jquery-3.4.1.min.js"></script>
<script>
    $(".capbtn").click(function(){
        $(this).toggleClass("check");
        $(this).children("i").toggleClass("left-circle right-circle");
    })
</script>