Realistic CSS Switch (checkbox)

index.pug

.center
  input#switch(type="checkbox")
  .wrap
    label(for="switch")
      span.rib
      span.rib
      span.rib



a(href="http://nathan.tokyo" target="_blank").sig NATHAN.TOKYO

realistic-css-switch-checkbox.markdown

Realistic CSS Switch (checkbox)

A Pen by Nathan Taylor on CodePen.

License.

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

$hue: 200;

$light: hsl($hue - 40,90%,85%);
$base: hsl($hue - 20,10%,70%);
$mid: hsl($hue + 20,40%,30%);
$dark: hsl($hue + 40,100%,10%);


$sans: 'Open Sans', sans-serif;
html{
  font-size: 5vh;
}

body{
  height: 100vh;
  width: 100vw;
  background: linear-gradient(lighten($base,8%), darken($base,8%));
  font-family: $sans;
}


#switch{
  outline: none;
  display: block;
  appearance: none;
  position: relative;
  width: 6rem;
  height: 2rem;
  background: $mid;
  border-radius: 2rem;
  appearance: none;
  filter: blur(0.4px);
              //dark rim
  box-shadow: -0.05rem -0.05rem 0.08rem rgba($dark,0.6),
              //light rim
              0.05rem 0.05rem 0.1rem rgba($light,1),
              //inner dark
              inset 0.5rem 0.5rem 2rem rgba($dark,0.5),
              //inner dark fine
              inset 0.1rem 0.1rem 0.2rem rgba($dark,0.75),
              //inner light
              inset -0.5rem -0.5rem 4rem rgba($light,0.5);
  
}
.wrap{
  display: block;
  position: relative;
  width: 6rem;
  height: 2rem;
  border-radius: 2rem;
  overflow: hidden;
  z-index: 1;
  transform: translatey(-100%);
}
label{
  display: block;
  position: absolute;
  top: 50%;
  left: 0.1rem;
  width: 4rem;
  height: 1.8rem;
  background: $base;
  border-radius: 2rem;
  transform: translate3d(0%,-50%, 0);
  transition: transform 150ms cubic-bezier(0.550, 0.085, 0.680, 0.530);
  filter: blur(0.4px);
              //dark rim
  box-shadow: inset -0.05rem -0.05rem 0.08rem rgba($dark,0.6),
              //light rim
              inset 0.05rem 0.05rem 0.1rem rgba($light,1),
              //outer dark
              0.5rem 0.5rem 2rem rgba($dark,0.5),
              //outer dark fine
              0.1rem 0.1rem 0.2rem rgba($dark,0.75),;
}
#switch:checked + div label{
  transform: translate3d(1.85rem,-50%, 0);
}

.rib{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.35rem;
  height: 1.2rem;
  border-radius: 1rem;
  background: $base; 
  opacity: 1;
  transform: translate3d(-50%,-50%, 0);
              //dark rim
  box-shadow: inset -0.02rem -0.03rem 0.08rem rgba($dark,0.5),
              //light rim
              inset 0.03rem 0.03rem 0.1rem rgba($light,1),
              //dark blur
              inset -0.02rem -0.03rem 0.2rem rgba($dark,0.3),
              //dark blur
              inset 0.03rem 0.03rem 0.2rem rgba($light,0.8),
              //blend dark
              0.05rem 0.08rem 0.3rem rgba($dark, 0.3),
              //blend light
              -0.05rem -0.08rem 0.4rem rgba($light, 0.3),
              //blend all
              0rem 0rem 0.2rem rgba($mid, 0.2);
  
              
  &:nth-child(1){
    left: 35%;
  }
  &:nth-child(3){
    left: 65%;
  }
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
}

.sig{
  position: fixed;
  bottom: 8px;
  right: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 100;
  font-family: sans-serif;
  color: rgba(0,0,0,0.4);
  letter-spacing: 2px;
}