Material Design Hamburger

index.html

main
  .nav-icon
    .line
    .line
    .line

Material Design Hamburger.markdown

Material Design Hamburger

Yet another morphing material design button. Just a test...

A Pen by Elton Mesquita on CodePen.

License.

style.css

*, *:before, *:after {
  box-sizing: border-box;
}




main { 
  width:  100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
  background: rgb(250,250,250);
  transform-style: preserve-3d;
  perspective: 400px;
}


main:hover {
  .lines,
  .nav-icon,
  .nav-icon:after {
    will-change: transform;
  }
}


.line {
  width:  40px;
  height: 7px;
  margin: auto;
  
  background: #fff;
  border-radius: 4px;
  transform-orign: 100% 100%;
  transition: all .4s ease;
}


.nav-icon {
  width:  80px;
  height: 80px;
  padding: 22px 0;
  position: relative;
  
  display: flex;
  flex-direction: column;
  
  background: #29abe2;
  border-radius: 100px;
  perspective: 400px;
  transition: all .6s ease;
  &:after {
    content: "";
    width:  100%;
    height: 100%;
    position: absolute;
    top:  0;
    left: 0;
    
    border-radius: 100px;
    box-shadow: 0 0 6px rgba(50,50,50,.85);
    transition: all .6s ease;
  }
}




// [1] It should be translateZ(80px), but
// it gets uglyly pixelated, unfortunately
//////////////////////////////////////////////

.nav-icon:hover {
  transform: scale(1.3); // [1]
  &:after {
    box-shadow: 0 6px 24px rgba(50,50,50,.45);
  }
  .line {
    transform: rotate3d(0,0,1,45deg);
     &:nth-child(2) {
      opacity: 0;
      transform: translate3d(-100%,0,0);
    } 
     &:nth-child(3) {
      transform: rotate3d(0,0,1,-45deg);
    } 
  }
}