#button {
  background: #000;
  border-radius: 50%;
  cursor: pointer;
  height: 100px;
  width: 100px;
  position: absolute;
  top: calc(50% - 50px);
  
  div {
    background: #FFFFFF; 
    height: 4px;
    width: 40px;
    position: absolute;
    left: 11px;
    top: 48px;
    transition: all .3s ease-in-out;
    transform-origin: 38px 2px;
  }
}
.close-back {
  left: calc(50% - 110px);
  .b1 { transform: translateX(0) rotate(45deg);   }
  .b2 { transform: translateX(0) rotate(135deg);  }
  .b3 { transform: translateX(0) rotate(225deg); }
  .b4 { transform: translateX(0) rotate(315deg); }
  &:hover {
    .b1 { transform: translateX(-21px) rotate(135deg); }
    .b2 { transform: translateX(-20px) rotate(180deg); }
    .b3 { transform: translateX(-20px) rotate(180deg); }
    .b4 { transform: translateX(-21px) rotate(225deg); }
  }
}
.next-back {
  left: calc(50% + 10px);
  .b1 { transform: translateX(18px) rotate(0deg);   }
  .b2 { transform: translateX(20px) rotate(45deg);  }
  .b3 { transform: translateX(20px) rotate(315deg); }
  .b4 { transform: translateX(18px) rotate(360deg); }
  &:hover {
    .b1 { transform: translateX(-21px) rotate(135deg); }
    .b2 { transform: translateX(-20px) rotate(180deg); }
    .b3 { transform: translateX(-20px) rotate(180deg); }
    .b4 { transform: translateX(-21px) rotate(225deg); }
  }
}

/* DEMO ONLY */

h4 {
  font-weight: 200;
  font-size: 13px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  font-family: sans-serif;
  color: #000000;
  text-transform: uppercase;
}
#next {
  position: absolute;
  bottom: 20px;
  right: 20px;
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  opacity: .1;
	font-family: sans-serif;
  text-transform: uppercase;
  color: #000000;
  text-decoration: none;
}
#next:hover {
  opacity: 1;
}