Чтобы создать меню с анимированными кнопками, можно следовать такому алгоритму на примере анимированной бургер-кнопки: 1

1. Создать кнопку в HTML. 1 Для этого нужно добавить в код кнопку с классом burger. 1
2. Задать размеры и стили в CSS. 1 Нужно сбросить стандартные стили фона и границ, задать размер кнопке. 1 Верхнюю и нижнюю линии создать с помощью псевдоэлементов ::after и ::before, задав им ширину 100%, высоту 4px и расположив их абсолютно относительно кнопки снизу и сверху. 1 Третью линию задать как тень от одной из линий и отпустить на середину кнопки. 1
3. Добавить анимацию на JavaScript. 1 При клике на кнопку нужно добавлять и удалять ей класс active. 1 Для плавной анимации добавить свойство transition и прописать в нём анимируемые свойства. 1

Ещё один вариант анимации без JavaScript. 1 Нужно заменить button на label и добавить ему атрибут for со значением burger-checkbox. 1 Также перед label добавить input с типом checkbox, идентификатором и классом burger-checkbox. 1 Теперь при нажатии на label будет срабатывать чекбокс. 1 Сам чекбокс нужно скрыть и при помощи псевдокласса :checked и комбинатора + изменять стиль активной кнопки, когда чекбокс выбран. 1

Для создания более сложного анимированного меню также можно использовать HTML, CSS и JavaScript. 2