WbmNLb

index.html

<div class="to-arrow">
  <div class="left">
    <input type="checkbox" id="menu-left" />
    <label for="menu-left"><span></span></label>
  </div>
  <div class="right">
    <input type="checkbox" id="menu-right" />
    <label for="menu-right"><span></span></label>
  </div>
  <div class="top">
    <input type="checkbox" id="menu-top" />
    <label for="menu-top"><span></span></label>
  </div>
  <div class="bottom">
    <input type="checkbox" id="menu-bottom" />
    <label for="menu-bottom"><span></span></label>
  </div>
</div>

<div class="to-close">
  <div class="x">
    <input type="checkbox" id="menu-x" />
    <label for="menu-x"><span></span></label>
  </div>
  <div class="x1">
    <input type="checkbox" id="menu-x1" />
    <label for="menu-x1"><span></span></label>
  </div>  
</div>

style.scss

$size: 5rem;
$thickness: .5rem;
$gap: 1rem;
$color: #CFD8DC;
$roundCap: true;

body {
  background: #455A64;
}

*,
*:before,
*:after {
  transition: all 300ms ease;
}

div > div {
  float: left;
  padding: 5rem;
}

input {
  display: none;
}

label {
  display: block;
  width: $size;
  height: ($thickness * 3 + $gap * 2);
  position: relative;
  
  span {
    position: relative;
    top: $thickness + $gap;
      
    &,
    &:before,
    &:after {
      display: block;
      background: $color;
      width: $size;
      height: $thickness;
      @if $roundCap {
        border-radius: $thickness / 2;
      }
    }

    &:before,
    &:after {
      content: '';
      position: absolute;
    }

    &:before { 
      bottom: $gap + $thickness; 
    }
    
    &:after { 
      top: $gap + $thickness;
    }
    
    .left &,
    .top &,
    .bottom & {
      &:before {
        transform-origin: top left;
      }
      
      &:after {
        transform-origin: bottom left;
      }
    }
    
    .right & {
      &:before {
        transform-origin: top right;
        right: 0;
      }
      
      &:after {
        transform-origin: bottom right;
        right: 0;
      }
    }    

    :checked ~ & {
      
      .to-arrow & {
        &:before,
        &:after {
          width: 60%;
        }
        
        &:before {
          bottom: (-1) * $thickness / 4;
        }

        &:after {
          top: (-1) * $thickness / 4;
        }
      }

      .left &,
      .top &,
      .bottom & {
        
        &:before { 
          transform: rotate(-40deg);
        }
        &:after { 
          transform: rotate(40deg); 
        }
      }
      
      .right & {
        &:before {
          transform: rotate(40deg);
        }
        &:after {
          transform: rotate(-40deg);
        }
      }
      
      .top & { transform: rotate(90deg); }
      .bottom & { transform: rotate(-90deg); }

      .x & {
        width: 0;
        &:before {
           transform: rotate(45deg);
           bottom: 0;
        }
        &:after {
          transform: rotate(-45deg);
          top: 0;
        }
      }
      
      .x1 & {
        background: none;
        &:before { animation: x1Before 500ms forwards; }
        &:after { animation: x1After 500ms forwards; }
      }
      
      @keyframes x1Before {
        50% { 
          bottom: 0;
          transform: rotate(0deg);
        }
        100% { 
          bottom: 0;
          transform: rotate(45deg); 
        }
      }

      @keyframes x1After {
        50% { 
          top: 0;
          transform: rotate(0deg);
        }
        100% { 
          top: 0;
          transform: rotate(-45deg); 
        }
      }      
      
    }
  }
}

WbmNLb.markdown

WbmNLb

A Pen by Razvan Spatariu on CodePen.

License.