Как сделать бургер кнопку на css с анимацией

Для начала создадим простую html-разметку которая будет состоять всего из двух элементов - элемента кнопки button с классом .burger и span с классом .burger__line который будет выполнять роль линии:

<button type="button" class="burger">
  <span class="burger__line"></span>
</button>

В псевдокласс :root добавим некоторые переменные:

:root {
  --timing: 0.3s;
  --bg-color: #3d3d49;
  --border-color: #4e4e5e;
  --white-color: #fff;
}

Переменная --timing будет содержать время выполнения перехода из одного состояния в другое, --bg-color, --border-color, --white-color содержат цвета.

Добавим стили для body, в которых будет задано вычисление элементов страницы с учетом внутренних отступов и границ box-sizing: border-box, цвет фона страницы, а также выравнивание кнопки по центру страницы на flex, и высота страницы 100vh чтобы можно было выровнять по вертикали:

body {
  box-sizing: border-box;
  background-color: var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Теперь зададим стили для самой кнопки. Укажем размеры в 50 пикселей, цвет по умолчанию изменим на прозрачный, позиционирование relative, потому что относительно кнопки мы будем абсолютно позиционировать линии, курсор pointer, и добавим границу кнопки:

.burger {
  width: 50px;
  height: 50px;
  background-color: transparent;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--border-color);
}

Стилизуем линию в кнопке.

Укажем ей размеры, цвет, скругление, выровняем ее ровно по центру кнопки, отключаем возможность взаимодействия с элементом с помощью указателя при помощи pointer-events, линия будет медленно становиться прозрачной когда кнопка станет активной здесь же нам понадобится переменная --timing, при возвращении в обычное состояние нам понадобиться небольшая задержка, после длительности перехода выполним через функцию calc() умножение значения переменной --timing на 1.5, и значение временной функции ease:

.burger__line {
  width: 34px;
  height: 4px;
  background-color: var(--white-color);
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: background-color var(--timing) calc(var(--timing) * 1.5) ease;
}

Остальные линии мы сделаем псевдоэлементами ::before и ::after. Позиционируем элементы абсолютно, сдвинем наверх на -12 пикселей, а слева нулевой отступ, ширину и высоту как у родительской линии, также скругление в 2 пикселя и фон белый, переход сделаем для двух свойств, а именно для top и transform, для top необходимо указать задержку переменной --timing чтобы правильно случился переход:

.burger__line::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--white-color);
  transition:
    top var(--timing) var(--timing) ease,
    transform var(--timing) ease;
}

А для псевдоэлемента ::after свойства будут те же, за исключением top опустим вниз на 12 пикселей:

.burger__line::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--white-color);
  transition:
    top var(--timing) var(--timing) ease,
    transform var(--timing) ease;
}

Когда мы будем нажимать на кнопку на нее будет добавлятся активный класс с помощью которого будет происходить анимация, напишем правила для этого.

Для главной линии делаем фон прозрачным, и плавный переход для него:

.burger--active .burger__line {
  background-color: transparent;
  transition: background-color var(--timing) ease;
}

Псевдоэлемент выровняем по центру относительно родителя, и повернем на 45 градусов, укажем плавный переход для трансформаций и главное не забыть указать задержку для transform:

.burger--active .burger__line::before {
  top: 0;
  transform: rotate(45deg);
  transition:
    top var(--timing) ease,
    transform var(--timing) var(--timing) ease;
}

Для псевдоэлемента ::after все тоже самое только повернем в другую сторону указав в transform -45 градусов:

.burger--active .burger__line::after {
  top: 0;
  transform: rotate(-45deg);
  transition:
    top var(--timing) ease,
    transform var(--timing) var(--timing) ease;
}

Со стилями все, теперь напишем небольшой скрипт который будет добавлять активный класс нашей кнопке при клике или нажатию.

Поместим нашу кнопку в переменную burgerButton, затем зададим слушатель события click на нее, в стрелочной функции укажем кнопке classList.toggle который будет переключать класс на активный:

let burgerButton = document.querySelector(".burger");

burgerButton.addEventListener("click", () => {
   burgerButton.classList.toggle("burger--active");
});

Вот что должно получиться: