<button class="menu-btn" aria-labelledby="sr-only">
  <span class="sr-only" id="sr-only">Menu</span>
  <div class="menu-btn__icon" aria-hidden="true">
    <span class="icon icon--menu">
      <span></span>
      <span></span>
      <span></span>
    </span>
    <span class="icon icon--close">
      <span></span>
      <span></span>
    </span>
  </div>
</button>

<ul class="social">
  <li>
    <a href="https://codepen.io/rhyspacker/" class="icon codepen" title="CodePen" target="_blank">
      <svg viewBox="0 0 512 512">
        <path d="M427 201.9c-0.6-4.2-2.9-8-6.4-10.3L264.2 87.3c-4.9-3.3-11.4-3.3-16.3 
                 0L91.4 191.6c-4 2.7-6.5 7.4-6.5 12.2v104.3c0 4.8 2.5 9.6 6.5 12.2l156.4 104.3c4.9 
                 3.3 11.4 3.3 16.3 0L420.6 320.4c4-2.6 6.6-7.4 6.6-12.2V203.9C427.1 203.2 
                 427.1 202.6 427 201.9 427 201.7 427.1 202.6 427 201.9zM270.7 127.1l115.2 76.8 
                 -51.5 34.4 -63.8-42.7V127.1zM241.3 127.1v68.6l-63.8 42.7 -51.5-34.4L241.3 
                 127.1zM114.3 231.4l36.8 24.6 -36.8 24.6V231.4zM241.3 384.9L126.1 308.1l51.5-34.4 
                 63.8 42.6V384.9zM256 290.8l-52-34.8 52-34.8 52 34.8L256 290.8zM270.7 
                 384.9V316.3l63.8-42.6 51.5 34.4L270.7 384.9zM397.7 280.6l-36.8-24.6 
                 36.8-24.6V280.6z"/>
      </svg>
      <!--[if lt IE 9]><em>CodePen</em><![endif]-->
    </a>
  </li>
  <li>
    <a href="https://github.com/Rhyspacker" class="icon github" title="GitHub" target="_blank">
      <svg viewBox="0 0 512 512">
        <path d="M256 70.7c-102.6 0-185.9 83.2-185.9 185.9 0 82.1 53.3 151.8 127.1 176.4 
                 9.3 1.7 12.3-4 12.3-8.9V389.4c-51.7 11.3-62.5-21.9-62.5-21.9 -8.4-21.5-20.6-27.2-20.6-27.2 
                 -16.9-11.5 1.3-11.3 1.3-11.3 18.7 1.3 28.5 19.2 28.5 19.2 16.6 28.4 43.5 20.2 54.1 
                 15.4 1.7-12 6.5-20.2 11.8-24.9 -41.3-4.7-84.7-20.6-84.7-91.9 0-20.3 7.3-36.9 
                 19.2-49.9 -1.9-4.7-8.3-23.6 1.8-49.2 0 0 15.6-5 51.1 19.1 14.8-4.1 30.7-6.2 
                 46.5-6.3 15.8 0.1 31.7 2.1 46.6 6.3 35.5-24 51.1-19.1 51.1-19.1 10.1 25.6 3.8 44.5 
                 1.8 49.2 11.9 13 19.1 29.6 19.1 49.9 0 71.4-43.5 87.1-84.9 91.7 6.7 5.8 12.8 17.1 
                 12.8 34.4 0 24.9 0 44.9 0 51 0 4.9 3 10.7 12.4 8.9 73.8-24.6 127-94.3 
                 127-176.4C441.9 153.9 358.6 70.7 256 70.7z"/>
      </svg>
      <!--[if lt IE 9]><em>GitHub</em><![endif]-->
    </a>
  </li>
  <li>
    <a href="https://www.linkedin.com/in/rhyspacker/" class="icon linkedin" title="LinkedIn"  target="_blank">
      <svg viewBox="0 0 512 512">
        <path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 
                 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 
                 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 
                 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 
                 0-56.3 30.9-56.3 30.9v-25.2H273.8z"/>
      </svg>
      <!--[if lt IE 9]><em>LinkedIn</em><![endif]-->
    </a>
  </li>
  
  <li>
    <a href="https://twitter.com/Rhyspacker" class="icon twitter" title="Twitter" target="_blank">
      <svg viewBox="0 0 512 512">
        <path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 
                 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 
                 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 
                 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 
                 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 
                 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/>
      </svg>
      <!--[if lt IE 9]><em>Twitter</em><![endif]-->
    </a>
  </li>
</ul>

$transition: cubic-bezier(.17,.67,.42,1.36);
$primaryColour: #85e59d;
$secondaryColour: #5F64F5;

body {
  text-align: center;
  background: #252525;
  margin: 0;
}

.menu-btn {
  position: relative;
  top: 100px;
  padding: 20px;
  background: $secondaryColour;
  margin: 0 auto;
  box-shadow: 2px 2px 20px -2px rgba(0,0,0,0.6);
  border: none;
  cursor: pointer;
  &:active, &:focus {
    outline: none;
  }
  &:after {
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    left: 12px;
    background: $primaryColour;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    transition: all 0.2s;
    opacity: 0;
  }
  &__icon {
    position: relative;
    width: 50px;
    height: 40px;
    margin: 0 auto;
    cursor: pointer;
  }
}

.icon {
  position: absolute;
  top: 0;
  left: 0;
}

.icon--menu {
  span {
    display: block;
    width: 50px;
    height: 4px;
    background: $primaryColour;
    transition: all 0.18s;
    transition-timing-function: $transition;
    transition-delay: 0.05s;
    &:not(last-child) {
      margin-bottom: 12px;
    }
  }
}

.icon--close {
  transform: scale(0);
  transform-origin: center center;
  transition: all 0.18s;
  transition-delay: 0.08s;
  transition-timing-function: $transition;
  opacity: 0;
  
  span {
    position: relative;
    display: block;
    width: 50px;
    height: 4px;
    background: $primaryColour;
    &:nth-of-type(1) {
      top: 17px;
      transform: rotate(45deg);
    }
    &:nth-of-type(2) {
      top: 13px;
      transform: rotate(-45deg);
    }
  }
}

.is--active {
  .icon--menu {
    span {    
      width: 0;
    }
  }
  .icon--close {
    transform: scale(1);
    opacity: 1;
  }
} 

.is--clicked {
  &:after {
    animation: btnClick 0.35s;
    animation-timing-function: $transition;
  }
}

@keyframes btnClick {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 0.35;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}


// Social
//
.social {
  position: fixed;
  bottom: 20px;
  right: 0;
  font-size: 0;
  list-style: none; 
  margin: 0;
  padding: 0 26px;
  
  li {
    display: inline-block;
    margin: 12px;
  }
  
  a, svg {
    display: block;
  }
  
  a { 
    position: relative;
    height: 40px;
    width: 40px;
  }
  
  svg {
    height: 100%;
    width: 100%;
  }
  
  .icon {
    color: #ffffff;
    fill: #ffffff;
    &:hover {
      border-radius: 100%;
      
      color: #ffffff;
      fill: #ffffff;
      
      -webkit-transform: scale(1.25);

      transform: scale(1.25);

      -webkit-transition: background-color 0.5s, 
      -webkit-transform 0.5s ease-out;

      transition: background-color 0.5s, 
      -webkit-transform 0.5s ease-out;

      transition: background-color 0.5s, 
      transform 0.5s ease-out;

      transition: background-color 0.5s, 
      transform 0.5s ease-out, 
      -webkit-transform 0.5s ease-out;
    }
  }
}

var menuBtn = document.querySelector(".menu-btn");

menuBtn.addEventListener("click", function() {
  menuBtn.classList.toggle("is--active");
  menuBtn.classList.add("is--clicked");
  setTimeout(function(){
    menuBtn.classList.remove("is--clicked");
  }, 300);
});