滑动式按钮

单纯使用html和css来实现滑动式按钮
代码写的有些烂, 逻辑有点乱(¬‿¬)
不过现在写出来就完事了2333(手动滑稽)

html代码

<!-- 在body标签下写入以下代码 -->

<div class="button">
    <input type="checkbox" class="btn-checkbox" id="checkbox">
    <label for="checkbox" class="btn-container">
        <span class="btn-content"></span>
    </label>
</div>

CSS代码

/*样式初始化*/
* {
    padding: 0;
    margin: 0;
}
html {
    font-size: 62.5%;
    box-sizing: border-box;
}
body {
    box-sizing: inherit;
    height: 100vh;

    /*将button居中*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.button {position: relative;}

/*隐藏input标签*/
.btn-checkbox {
    display: none;
}

.btn-container {
    /*利用flex布局将按钮中的圆球垂直居中*/
    display: flex;
    flex-direction: column;
    justify-content: center;
  
    /*设置按钮样式*/
    height: 5rem;
    width: 10rem;
    border-radius: 50px;
    background-color: rgb(255, 137, 137);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.402);
}

/*当checkbox被选中时, 选择紧邻的标签并改变其背景样式*/
.btn-checkbox:checked + .btn-container{background-color: rgb(136, 228, 136);}
/*当checkbox被选中时, 圆球移动*/
.btn-checkbox:checked + .btn-container .btn-content {left: 55%;}

/*利用绝对定位移动按钮中的圆球*/
.btn-content {
    position: absolute;
    left: 5%;
    border-radius: 50px;
    background-color: white;
    height: 4rem;
    width: 4rem;
    transition: all .2s;
}