Бургер кнопка для меню

Верстаем бургер кнопку

Добавляем в html кнопку с классом burger

<button class="burger"></button>

Далее идем в CSS и задаем размер нашей кнопке и сбрасываем стандартные стили фона и границ. Верхнюю и нижнюю линии мы создадим с помощью псевдоэлементов ::after и ::before, задав им ширину 100%, высоту 4px и расположив их абсолютно относительно кнопки снизу и сверху, а третью зададим как тень от одной из линий и отпустим на середину кнопки.

.burger {
  position: relative;
  border: none;
  background: transparent;
  width: 40px;
  height: 26px;
}
.burger::before,
.burger::after {
  content: '';
  left: 0;
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 10px;
  background: #000;
}
.burger::before {
  top: 0;
  box-shadow: 0 11px 0 #000;
}
.burger::after {
  bottom: 0;
}

В итоге мы получаем такую бургер кнопку

Анимируем бургер кнопку на JS

Добавим кнопке анимацию при клике, кнопка будет превращаться в крестик и обратно. Для этого нам понадобится использовать немного javaScript. Получим кнопку и при клике на нее будем добавлять и удалять ей класс active.

const burger = document.querySelector('.burger');

burger.addEventListener('click', () => {
  burger.classList.toggle('active');
});

А в сss мы добавим стили для активной кнопки, развернем линии на 45 градусов и скроем среднюю линию, чтобы получится крест. Для плавной анимации добавим свойство transition и пропишем в нем свойства которые мы анимируем. Первым значением в transition идет анимируемое свойство, вторым время за которое происходит изменение и третьим задержка. Чтобы анимировать несколько свойств, все необходимые свойства и насторойки к ним, добавляются через запятую.

.burger::before {
  transition: box-shadow .3s .15s, top .3s .15s, transform .3s;
}
.burger::after {
  transition: bottom .3s .15s, transform .3s;
}
.burger.active::before {
  top: 11px;
  transform: rotate(45deg);
  box-shadow: 0 6px 0 rgba(0,0,0,0);
  transition: box-shadow .15s, top .3s, transform .3s .15s;
}
.burger.active::after {
  bottom: 11px;
  transform: rotate(-45deg);
  transition: bottom .3s, transform .3s .15s;
}

И получаем готовую бургер кнопку

Анимируем бургер кнопку без JS

Анимировать можно и без javaScript. Для этого заменим button на label и добавим ему атрибут for со значением burger-checkbox. Также перед label добавим input с типом checkbox, индинтификатором и классом burger-checkbox. Теперь при нажатии на label будет срабатывать чекбокс. Сам чекбокс мы скроем и при помощи псевдокласса :checked и комбинатора + будем изменять стиль активной кнопки, когда чекбокс выбран. Следовательно, в css заменяем селектор .burger.active на .burger-checkbox:checked + .burger.

Как сделать открывающееся бургер меню без javaScript, с использованием данной кнопки читайте в нашей статье – Бургер меню на HTML и CSS