Atomic Switch

index.html

<input class="atomic switch" type="checkbox" name="atomic" checked>

style.scss

body{
  background:#222;
}
.atomic{
  &.switch{
    display:block;
    width:54px;
    height:26px;
    position:relative;
    /* display:none; */
    visibility:hidden;
    &:before{
      display:block;
      visibility:visible;
      content:'';
      width:100%;
      border-radius:40px;
      height:26px;
      border:3px solid #FFF;
      transition:all 0.3s ease;

    }
    &:after{
      display:block;
      content:'';
      height:100%;
      width:50%;
      background:#FFF;
      position:absolute;
      visibility:visible;
      margin:3px;
      transform:scale(.75,.75);
      left:0;
      top:0;
      border-radius:50%;
      transition:all 0.3s ease;
    }
    &:checked:after{
      left:50%;
      background:orange;
    }
    &:checked:before{
      border-color:orange;
    }
  }
}

yyqYyj.markdown

yyqYyj

A Pen by Jesús Otero on CodePen.

License.