Scalable hamburger icon

by oilvier

HTML

<div class="hamburger">
    <div class="hamburger__line"></div>
</div>


<div class="hamburger hamburger--md">
    <div class="hamburger__line"></div>
</div>

<div class="hamburger hamburger--lg">
    <div class="hamburger__line"></div>
</div>

SCSS

/**
 * Hamburger icon
 */
 .hamburger {
    display:inline-block;
    padding:5px 0;
    transition:all 0.3s ease 0s;
    width:1em;
    height:1em;
    font-size:26px;
    line-height:1;
    color:tomato;
}
.hamburger__line {
    position:relative;
    display: inline-block;
    vertical-align:middle;
    width:1em;
    height:0.188em;
    background:currentColor;
    transition:all 0.3s ease 0s;
    border-radius:0.083em;
}
.hamburger__line:before, .hamburger__line:after {
    content:"";
    position: absolute;
    left:0;
    display:inline-block;
    width:100%;
    height:100%;
    background:currentColor;
    transform-origin:0.083em center 0;
    transition:all 0.3s ease 0s;
    border-radius:0.083em;
}
.hamburger__line:after {
    top:-0.313em;
}
.hamburger__line:before {
    top:0.313em;
}

.hamburger:hover {
  transform:scale3d(.8,.8,.8);
}
 
.hamburger:hover .hamburger__line {
    &:before,
    &:after {
      top:0;
      width:60%;
    }
   
    &:before {transform:rotate3d(0,0,1,40deg);}
    &:after {transform:rotate3d(0,0,1,-40deg);}
}

.hamburger--md {font-size:30px;}
.hamburger--lg {font-size:60px;}