.toggle {

    font-family: sans-serif;

    background-color: #ccc;

    display: inline-block;

    border-radius: 1.2em;

    padding: 0.2em 2em 0.2em 0.2em;

}

.toggle input {

    display: none;

}

.toggle label {

    position: relative;

    transition: transform 0.1s;

    cursor: pointer;

    background-color: #999;

    color: #fff;

    display: inline-block;

    padding: 0.25em 1em;

    border-radius: 1em;

}

.toggle input:checked + label {

    background-color: #693;

    color: #fff;

    transform: translateX(1.8em);

}