复选框改成开关样式，滑动切换（纯css实现）

界面 html  

 <div>工作状态：</div>

                    <div class="button  r" id="button-10">
                        <input type="checkbox" class="checkbox">
                        <div class="knobs">
                            <span>找工中</span>
                        </div>
                        <div class="layer"></div>
                    </div>

 

css代码

    .button-cover {
            height: 100px;
            margin: 20px;
            background-color: #fff;
            box-shadow: 0 10px 20px -8px #c5d6d6;
            border-radius: 4px;
        }

            .button-cover:before {
                counter-increment: button-counter;
                content: counter(button-counter);
                position: absolute;
                right: 0;
                bottom: 0;
                color: #d7e3e3;
                font-size: 12px;
                line-height: 1;
                padding: 5px;
            }

        .button-cover, .knobs, .layer {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .button {
            position: relative;
            top: 50%;
            width: 135px;
            height: 36px;
            margin: 15px auto 0 auto;
            overflow: hidden;
        }

            .button.r, .button.r .layer {
                border-radius: 100px;
            }

            .button.b2 {
                border-radius: 2px;
            }

        .checkbox {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            opacity: 0;
            cursor: pointer;
            z-index: 3;
        }

        .knobs {
            z-index: 2;
        }

        .layer {
            width: 100%;
            background-color: #ebf7fc;
            transition: 0.3s ease all;
            z-index: 1;
        }





        /* Button 10 */
        #button-10 .knobs:before, #button-10 .knobs:after, #button-10 .knobs span {
            position: absolute;
            top: 4px;
            width: 60px;
            height: 30px;
            font-size: 10px;
            font-weight: bold;
            text-align: center;
            line-height: 1;
            padding: 9px 4px;
            border-radius: 50%;
            transition: 0.3s ease all;
        }

        #button-10 .knobs:before {
            content: '';
            left: 4px;
            background-color: #03A9F4;
        }

        #button-10 .knobs:after {
            content: '工作中';
            right: 4px;
            color: #4e4e4e;
        }

        #button-10 .knobs span {
            display: inline-block;
            left: 4px;
            color: #fff;
            z-index: 1;
        }

        #button-10 .checkbox:checked + .knobs span {
            color: #4e4e4e;
        }

        #button-10 .checkbox:checked + .knobs:before {
            left: 70px;
            background-color: #F44336;
        }

        #button-10 .checkbox:checked + .knobs:after {
            color: #fff;
        }

        #button-10 .checkbox:checked ~ .layer {
            background-color: #fcebeb;
        }