Nav button for collabsible (mobile)

index.html

<div class="controls">
        <a class="open-nav">
            <span class="nav-icon">           
        </span>
        </a>
    </div>
    <div class="controls">
        <a class="close-nav">
            <span class="nav-icon">           
        </span>
        </a>
    </div>

Nav button for collabsible (mobile).markdown

Nav button for collabsible (mobile)

Inspired by Tobias Van Schneider

A Pen by Wolfgang Born on CodePen.

License.

style.scss

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

body {
  background-color: #000;
  color: #fff;
}

.controls {
  width: 36px;
  height: 36px;
  float: right;
  .open-nav,
  .close-nav {
    height: 100%;
    padding: 5px;
    cursor: pointer;
    display: block;
    .nav-icon {
      width: 24px;
      height: 2px !important;
      display: block;
      position: absolute;
      background-color: #ffffff;
      transform: translateY(-50%);
      margin-top: 13px;
      transition: all 0.3s ease;
      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: inherit;
        transition: all 0.3s ease-in-out;
      }
    }
  }
  .open-nav {
    &:hover {
      .nav-icon {
        &::before {
          transform: translateY(-10px);
        }
        &::after {
          transform: translateY(10px);
        }
      }
    }
    .nav-icon {
      &::before {
        content: "";
        transform: translateY(-6px) translateZ(0);
        background-color: inherit;
      }
      &::after {
        content: "";
        transform: translateY(6px) translateZ(0);
        background-color: inherit;
      }
    }
  }
  .close-nav {
    .nav-icon {
      visibility: hidden;
      &::before {
        transform: rotate(45deg);
        visibility: visible;
      }
      &::after {
        transform: rotate(-45deg);
        visibility: visible;
      }
    }
    &:hover {
      .nav-icon {
        transform: rotate(45deg);
      }
    }
  }
}