h1 Open / Close  button
h2 Pure CSS swagg

button#btn
  -for (var x=0; x<3; x++)
    span
View Compiled
body
  background: hsl(0, 0, 92)
  font-family: sans-serif
h1, h2
  position: absolute
  left: 50%
  transform: translateX(-50%)
  color: hsl(0, 0, 15)
  font-weight: bold
  text-transform: uppercase
  letter-spacing: 2px
h1
  top: 24px
  font-size: 12px
h2
  top: 44px
  font-size: 10px
  opacity: 0.7
  

  
  
$accent-color: hsl(0, 0, 50)
#btn
  position: absolute
  width: 80px
  height: 80px
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  cursor: pointer
  background: hsl(0, 0, 100)
  border-radius: 50%
  border: none
  outline: none
  span
    position: absolute
    width: 50px
    height: 4px
    top: 50%
    left: 50%
    background: hsl(0, 0, 15)
    border-radius: 2px
    overflow: hidden
    transition: all 0.3s linear
    &::before
      content: ''
      position: absolute
      width: 0
      height: 100%
      top: 0
      right: 0
      background: $accent-color
      transition: all 0.3s linear
    &:nth-child(1)
      animation: span-first-off 0.5s ease-in-out
      animation-fill-mode: forwards
    &:nth-child(2)
      animation: span-second-off 0.5s ease-in-out
      animation-fill-mode: forwards
    &:nth-child(3)
      animation: span-third-off 0.5s ease-in-out
      animation-fill-mode: forwards
    
#btn.on
  &:hover span::before
    width: 100%
    transition: all 0.3s linear
  span
    &:nth-child(1)
      animation: span-first-on 0.5s ease-in-out
      animation-fill-mode: forwards
    &:nth-child(2)
      animation: span-second-on 0.5s ease-in-out
      animation-fill-mode: forwards
    &:nth-child(3)
      animation: span-third-on 0.5s ease-in-out
      animation-fill-mode: forwards

     
@keyframes span-first-on
  0%
    transform: translate(-50%, -300%)
  30%
    transform: translate(-50%, -50%)
  100%
    transform: translate(-50%, -50%) rotate(-45deg)
@keyframes span-first-off
  0%
    transform: translate(-50%, -50%) rotate(-45deg)
  30%
    transform: translate(-50%, -50%) rotate(0deg)
  100%
    transform: translate(-50%, -300%)
  
@keyframes span-second-on
  0%
    transform: translate(-50%, -50%)
  25%
    background: $accent-color
  50%
    transform: translate(-50%, -50%) scale(1)
  100%
    transform: translate(-150%, -50%) scale(0)
@keyframes span-second-off
  0%
    transform: translate(-150%, -50%) scale(0)
  25%
    background: $accent-color
  50%
    transform: translate(-50%, -50%) scale(1)
  100%
    transform: translate(-50%, -50%)
    
@keyframes span-third-on
  0%
    transform: translate(-50%, 200%)
  30%
    transform: translate(-50%, -50%)
  100%
    transform: translate(-50%, -50%) rotate(45deg)
@keyframes span-third-off
  0%
    transform: translate(-50%, -50%) rotate(45deg)
  30%
    transform: translate(-50%, -50%) rotate(0deg)
  100%
    transform: translate(-50%, 200%)
  
View Compiled
var e = document.getElementById('btn');
e.addEventListener('click', function() {
  if (this.className == 'on') this.classList.remove('on');
  else this.classList.add('on');
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.