Backburger icon.markdown

Backburger icon

The recreation of the new "backburger" icon, used in the Android's Slack app

A Pen by Brian Calm on CodePen.

License.

index.html

<input type="checkbox" id="check"/>
<label for="check" class="icon">
  <div class="s-line"></div>
  <div class="l-line"></div>
  <div class="d-line top"></div>
  <div class="d-line bottom"></div>
  <div class="s-line"></div>
</label>

script.js

/*
 * Pure CSS!
 * 
 * Just because Yair Even Or (@vsync) says that Javascript is Odd
 *
 */

style.css

body {
  background: #563C82;
}
input {
  display: none;
}
.icon {
  position: absolute;
  top: 0; bottom: 0;
  right: 0; left: 0;
  width: 170px;
  height: 80px;
  margin: auto;
  cursor: pointer;
  div {
    position: absolute;
    height: 17px;
    border-radius: 100px;
    background: #FFF;
    transition: all 0.5s ease;
  }
}
.s-line {
  right: 0;
  width: 100px;
  &:first-child {
    top: 0px;
  }
  &:last-child {
    bottom: 0px;
  }
}
.l-line {
  top: 0;
  right: 0;
  bottom: 0;
  width: 170px;
  margin: auto;
}
.d-line {
  left: -8px;
  width: 62px;
  margin: auto;
  &.top {

    top: 15.5px;
    transform: rotate(-45deg);
  }
  &.bottom {
    bottom: 15.5px;
    transform: rotate(45deg);
  }
}
#check:checked {
  + label {
    div:not(.d-line) {
      width: 0;
    }
    .d-line {
      width: 100px;
      &.top {
        transform: translate(40px, 17px) rotate(-45deg);
      }
      &.bottom {
        transform: translate(40px, -15px) rotate(45deg);
      }
    }
  }
}