CSSだけでトグルボタンをつくる

input要素をCSSでトグルボタン風に仕上げてみました。

DEMO

See the Pen Toggle Button made from CSS only by kimmy (@kimmy) on CodePen.

HTML

<input type="checkbox" class="btn center"/>

SCSS

$white: #f8f8f2;
$green: #a6e22e;

body {
  background: $white;
}

.center {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
}

.btn {
  $size: 90px;
  $delay: .2;

  border: none;
  border-radius: $size / 2;
  width: $size * 1.75; height: $size;
  box-shadow: 0 0 2px rgba(0, 0, 0, .4) inset;
  background: $white;
  cursor: pointer;
  outline: none;
  transition: background #{$delay}s ease-in-out;
  -webkit-appearance: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  
  &:after {
    display: block;
    position: absolute;
    top: 0; bottom: 0;
    left: 0;
    margin: auto;
    border-radius: 50%;
    width: $size; height: $size;
    content: "";
    background: $white;
    box-shadow: 0 0 4px rgba(0, 0, 0, .4);
    transition: left #{$delay}s ease-in-out;
    pointer-events: none;
  }
  
  &:checked {
    background: $green;
    
    &:after {
      left: $size * 0.75;
    }
  }
}