hamburger

gistfile1.txt

<button class="b-header__hamburger">
  <span></span>
  <span></span>
  <span></span>
</button>

.b-header__hamburger {
  position: relative;

  width: 25px;
  height: 18px;

  box-sizing: content-box;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: none;
  outline: none;
  background-color: transparent;

  span {
    width: 25px;
    height: 2px;
    display: block;
    background-color: #b0bec5;

    position: absolute;
    transition: .3s ease;

    &:first-child {
      top: 0;
      transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    &:nth-child(2) {
      top: 0;
      bottom: 0;
      margin: auto;
      transition: all 0ms 300ms;
    }

    &:last-child {
      bottom: 0;
      transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }
  }

  &.b-header__hamburger_is-active_true {
    span {
      &:first-child {
        top: 8px;
        transform: rotate(45deg);
        transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
      }

      &:nth-child(2) {
        opacity: 0;
        transition: all 0ms 300ms;
      }

      &:last-child {
        bottom: 8px;
        transform: rotate(-45deg);
        transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
      }
    }
  }
}