Эффект реализован на использовании связки из HTML, CSS и JavaScript (native).

Основной блок nav содержит в себе ul в состоянии flex. Элементы списка включают в себя ссылку с двумя span: иконкой и текстом. Текстам и красному блоку (кнопке) задается позиция absolute, что позволяет им свободно перемещаться.

Закругления панели по краям от красного блока реализуются путем создания псевдоэлементов :after и :before в виде квадратов с скругленным углом возле красного блока и тенью box-shadow цвета фона.

Красному блоку добавляется border с цветом фона для создания иллюзии отступа от панели.

Взаимодействие происходит с помощью JavaScript, который обрабатывает клики и переназначает классы. Иконка и текст перемещаются свойством transform, а тексту задается opacity 0.

Красный блок div получает новые значения положения на основе вычислений nth-child элемента li в ul.