Result


CSSのみで実装したアニメーションエフェクト付きのtoggleボタンです
各ボタンのスタイルはPenをご参照ください

css

Code :
/* Button 1 */
#button-1 .knobs:before
{/*左右に移動するボタンのスタイル*/
    content: 'YES';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 9px 4px;
    background-color: #03A9F4;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
 
#button-1 .checkbox:checked + .knobs:before
{/*NO側にチェックが入っている時は移動*/
    content: 'NO';
    left: 42px;
    background-color: #f44336;
}
 
#button-1 .checkbox:checked ~ .layer
{
    background-color: #fcebeb;
}
 
#button-1 .knobs, #button-1 .knobs:before, #button-1 .layer
{
    transition: 0.3s ease all;
}

html

Code :
<div class="toggle-button-cover">
      <div class="button-cover">
        <div class="button r" id="button-1">
          <input type="checkbox" class="checkbox">
          <div class="knobs"></div>
          <div class="layer"></div>
        </div>
      </div>
    </div>

via

Pure CSS Toggle Buttons | ON-OFF Switches