css 滑动按钮样式

<div class="pub_switch_box">
    <input type="checkbox" id="pub_switch_a1" class="pub_switch" />
    <label for="pub_switch_a1"></label>
    <input type="checkbox" id="pub_switch_a2" class="pub_switch" checked />
    <label for="pub_switch_a2"></label>
</div>

/*滑动按钮样式 <-- start --> */
.pub_switch_box {
    font-size: 0;
    display: inline-block;
    margin-left: 30%;
}

.pub_switch {
    display: none;
}

.pub_switch + label {
    display: inline-block;
    position: relative;
    width: 56px;
    height: 26px;
    margin: 5px;
    background-color: #fafbfa;
    border-radius: 50px;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
}

.pub_switch + label:after {
    content:"";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: box-shadow 0.1s ease-in;
    transition: box-shadow 0.1s ease-in;
    left: 0;
    border-radius: 100px;
    box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0, 0, 0, 0.4);
}

.pub_switch + label:before {
    content: "";
    position: absolute;
    top: 0;
    left: 1px;
    z-index: 999999;
    width: 26px;
    height: 26px;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    border-radius: 100px;
    box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.3);
    background: white;
}

.pub_switch:active + label:after {
    box-shadow: inset 0 0 0 20px #eee, 0 0 1px #eee;
}
.pub_switch:active + label:before {
    width: 37px;
}
.pub_switch:checked:active + label:before {
    width: 37px;
    left: 20px;
}
.pub_switch + label:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
    inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.pub_switch:checked + label:before {
    content: "";
    position: absolute;
    left: 31px;
    border-radius: 100px;
}
.pub_switch:checked + label:after {
    content: "";
    font-size: 1.5em;
    position: absolute;
    background: #3399ff;
    box-shadow: 0 0 1px #3399ff;
}
/* <-- end --> */

转载于:https://www.cnblogs.com/y-lin/p/5728398.html