<label for="lightSwitch" class="wrap">
  <input type="checkbox" checked id="lightSwitch" name="lightSwitch" class="light-switch" />
  <div class="panel">
    <div class="overlay"></div>
    <div class="screw top">
      <div class="screw__slot"></div>
    </div>
    <div class="switch__hole">
      <div class="switch__groove">
        <div class="switch">
          <div class="switch__shadow-box top">
            <div class="switch__shadow top"></div>
          </div>
          <div class="switch__shadow-box bottom">
            <div class="switch__shadow bottom"></div>
          </div>
          <div class="switch__top">
            <div class="switch__top-outset"></div>
          </div>
          <div class="switch__bottom">
            <div class="switch__bottom-outset"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="screw bottom">
      <div class="screw__slot"></div>
    </div>
  </div>
</label>

* {
  box-sizing: border-box;
}

html,
body {
  background: #ccc;
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrap {
  align-content: center;
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}

.panel {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: inset -4px -4px 8px rgba(0,0,0,.25), inset 4px 4px 8px rgba(255,255,255,.5), inset 2px 2px 2px rgba(177,177,177,.25), -4px -4px 16px rgba(255,255,255,.25), 1px 1px 1px rgba(0,0,0,.1), 4px 4px 2px rgba(0,0,0,0.05), 6px 6px 3px rgba(0,0,0,0.05);
  height: 3 * 140px;
  position: relative;
  width: 3 * 90px;
}

.screw {
  align-content: center;
  align-items: center;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 100%;
  box-shadow: inset -3px -3px 6px rgba(0,0,0,.1), inset 0 0 2px rgba(0,0,0,.2);
  display: flex;
  height: 24px;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  
  &.top {
    top: 24px;
    
    .screw__slot {
      transform: rotate(10deg);
    }
  }
  
  &.bottom {
    bottom: 24px;
    
    .screw__slot {
      transform: rotate(-30deg);
    }
  }
  
  &__slot {
    background-color: #eee;
    border-radius: 2px;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,.2);
    height: 4px;
    width: calc(100% - 2px);
  }
}

.switch {
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #ddd;
  box-shadow: 0 0 2px rgba(0,0,0,.75), -2px -2px 2px rgba(255,255,255,.75);
  cursor: pointer;
  position: relative;
  height: 100%;
  width: 100%;
  
  &__hole {
    background-color: #bbb;
    border-radius: 6px;
    height: 240px;
    left: 50%;
    padding: 2px;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 120px;
  }
  
  &__groove {
    background-color: #f7f7f7;
    border-radius: 5px;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,.2), inset -1px -1px 4px rgba(0,0,0,.2), -1px -1px 4px rgba(255,255,255,.5);
    padding: 5px;
    height: 100%;
    width: 100%;
  }
  
  &__top {
    background-color: #eee;
    box-shadow: inset 0 0 6px rgba(0,0,0,.05), inset 0 0 24px rgba(0,0,0,.025), inset -16px -16px 36px rgba(0,0,0,.1);
    height: 50%;
    left: 0;
    position: absolute;
    top: 0;
    transition: background .25s ease, box-shadow .25s ease;
    width: 100%;
    z-index: 2;
    
    &-outset {
      background-color: #fff;
      background-image: linear-gradient(90deg, #fff 0%, #f7f7f7 100%);
      height: 10px;
      transition: height .25s ease;
    }
  }
  
  &__bottom {
    background-color: #fff;
    box-shadow: inset 0 0 3px rgba(0,0,0,.1), inset 0 0 12px rgba(0,0,0,.05);
    height: 50%;
    left: 0;
    position: absolute;
    top: 50%;
    transition: background .25s ease, box-shadow .25s ease;
    width: 100%;
    z-index: 2;
    
    &-outset {
      bottom: 0;
      background-color: #fff;
      background-image: linear-gradient(90deg, #e7e7e7 0%, #d7d7d7 100%);
      box-shadow: inset 0 0 3px rgba(0,0,0,.1), inset 0 0 12px rgba(0,0,0,.05);
      height: 0px;
      position: absolute;
      transition: height .25s ease;
      width: 100%;
    }
  }
  
  &__shadow-box {
    height: 208px;
    left: 104px;
    overflow: hidden;
    position: absolute;
    width: 100px;
    z-index: 1;
    
    &.top {
      top: -96px;
    }
    
    &.bottom {
      top: 20px;
    }
  }
  
  &__shadow {
    background-color: rgba(0,0,0,.33);
    height: 90px;
    position: absolute;
    transition: left .25s ease, filter .25s ease, opacity .25s ease, transform .25s ease;
    width: 90px;
    
    &.top {
      bottom: 20px;
      filter: blur(10px);
      left: -70px;
      opacity: 1;
      transform: rotate(20deg);
    }
    
    &.bottom {
      bottom: 0;
      left: -90px;
      filter: blur(0px);
      opacity: .5;
      transform: rotate(0deg);
    }
  }
}

.light-switch {
  position: absolute;
}

.overlay {
  background-color: rgba(0,0,0,.33);
  height: 100vh;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition: background-color .1s ease;
  user-select: none;
  width: 100vw;
  z-index: 10;
}

input[type=checkbox]:checked {
  & + .panel {
    .switch {
      &__top {
        background-color: #fff;
        box-shadow: inset 0 0 3px rgba(0,0,0,.1), inset 0 0 12px rgba(0,0,0,.05);
        
        &-outset {
          height: 0;
        }
      }
      
      &__bottom {
        background-color: #eee;
        
        &-outset {
          height: 10px;
        }
      }
      
      &__shadow {
        &.top {
          left: -90px;
          filter: blur(0px);
          opacity: .5;
          transform: rotate(0deg);
        }

        &.bottom {
          left: -70px;
          filter: blur(10px);
          opacity: 1;
          transform: rotate(-20deg);
        }
      }
    }
    
    .overlay {
      background-color: rgba(0,0,0,0);
    }
  }
}