website/assets/sass/button.scss

.button {
    background-color: $accent;
    color: white;
    padding: 1rem 2rem;
    min-width: 10rem;
    font-size: 1.2rem;
    border: 0;
    border-radius: 2px;
}


@keyframes topbar_left {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(45deg) scaleX(1.6);
  }
}
@keyframes topbar_right {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-45deg) scaleX(1.6);
  }
}


@keyframes middlebar {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

@keyframes bottombar_left {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-45deg) scaleX(1.6);
  }
}
@keyframes bottombar_right {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(45deg) scaleX(1.6);
  }
}
@keyframes topbottom {
  0% {
    transform: scaleX(2);
  }
  100% {
    transform: scaleX(2);
  }
}


$dur: 1s;

// .burger {
//     width: 100px;
//     height: 100px;
//     border: 1px solid red;
//     display: flex;
//     justify-content: space-between;
//     flex-direction: column;
//     overflow: hidden;
//     .bar {
//         position: relative;
//         animation-fill-mode: forwards !important;
//     }
//     .bar div {
//         position: absolute;
//         width: 100%;
//         height: 1em;
//         background: rgba(149, 165, 166, 1);
//         border-radius: 1em;
//     }
//     .bar-group {
//         height: 15px;
//         display: flex;
//         justify-content: center;
//     }
//     .bar1, .bar2 {
//     }
//     .bar1 {
//         .bar {
//             width: 100%;
//             top: -50%;
//         }
//         .bar:nth-of-type(1) {
//             animation: topbar_left $dur ease-in-out;
//             transform-origin: top left;
//         }
//         .bar:nth-of-type(2) {
//             animation: topbar_right $dur ease-in-out;
//             transform-origin: top right;
//         }
//     }
//     .bar2 {
//         // middle bar
//         display: flex;
//         justify-content: center;
//         .bar {
//             animation: middlebar $dur ease-in-out;
//         }
//     }
//     .bar3 {
//         .bar {
//             width: 100%;
//             top: 50%;
//         }
//         .bar:nth-of-type(1) {
//             animation: bottombar_left $dur ease-in-out;
//             transform-origin: bottom left;
//         }
//         .bar:nth-of-type(2) {
//             animation: bottombar_right $dur ease-in-out;
//             transform-origin: bottom right;
//         }
//     }
// }