Cacher is the code snippet organizer for pro developers

body {
  background: #4183D7;
}
#toggle {
  position: relative;
  width: 30px;
  height: 26px;
  margin: 100px auto;
  input {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
    &:checked {
      + span {
        background: transparent;
        &:after {
          transform: rotate(45deg) translate(-1px, -8px);
        }
        &:before {
          transform: rotate(-45deg) translate(-4px, 12px);
        }
      }
    }
  }
  span {
    position: absolute;
    width: 100%;
    height: 5px;
    background: #fff;
    margin-top: 10px;
    &:before, &:after {
      content: "";
			position: absolute;
			width: 100%;
			height: 5px;
			background: #fff;
			top: -9px;
			transition: 0.3s;
    }
    &:after {
      top: 9px;
    }
  }
}

<div id="toggle">
      <input type="checkbox">
      <span></span>
	</div>