sass-burger/demo/style.css

A Sass mixin for creating hamburger icons.

.menu-button {
  display: inline-block;
  padding: .5em;
  background-color: #fafafa;
  border: 1px solid #ccc; }

.burger-icon {
  position: relative;
  margin-top: 8px;
  margin-bottom: 8px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .burger-icon, .burger-icon::before, .burger-icon::after {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #444;
    outline: 1px solid transparent;
    -webkit-transition-property: background-color, -webkit-transform;
    -moz-transition-property: background-color, -moz-transform;
    -o-transition-property: background-color, -o-transform;
    transition-property: background-color, transform;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s; }
  .burger-icon::before, .burger-icon::after {
    position: absolute;
    content: ""; }
  .burger-icon::before {
    top: -8px; }
  .burger-icon::after {
    top: 8px; }

.menu-button.is-active .burger-icon {
  background-color: transparent; }

.menu-button.is-active .burger-icon::before {
  -webkit-transform: translateY(8px) rotate(45deg);
  -moz-transform: translateY(8px) rotate(45deg);
  -ms-transform: translateY(8px) rotate(45deg);
  -o-transform: translateY(8px) rotate(45deg);
  transform: translateY(8px) rotate(45deg); }

.menu-button.is-active .burger-icon::after {
  -webkit-transform: translateY(-8px) rotate(-45deg);
  -moz-transform: translateY(-8px) rotate(-45deg);
  -ms-transform: translateY(-8px) rotate(-45deg);
  -o-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg); }