JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<a id="zornet_ru_ksanimga" href="http://zornet.ru"><span></span></a>

CSS

body { background-color: black;}

#zornet_ru_ksanimga {position: relative; display: inline-block; width:35px; height:25px;}
#zornet_ru_ksanimga span { position: absolute; left: 0; top: 10px; }

#zornet_ru_ksanimga span, 
#zornet_ru_ksanimga span:before,
#zornet_ru_ksanimga span:after {
  position: absolute;
  display: block;
  content: '';
  height: 5px;
  width: 35px;
  background: white;
  border-radius: 1px;
  cursor: pointer;
}
#zornet_ru_ksanimga span:before {
  top: -10px;
}
#zornet_ru_ksanimga span:after {
  bottom: -10px; 
}

/* Добавим анимацию всех свойств для блоков нашей иконки */
#zornet_ru_ksanimga span, #nav-toggle span:before, #zornet_ru_ksanimga span:after {
  transition: all 500ms ease-in-out;
}

/* Центральный блок делаем прозрачным */
#zornet_ru_ksanimga.active span {
  background-color: transparent;
}

/* Смещаем псевдо-элементы в центр иконки (на место основного блока) */
#zornet_ru_ksanimga.active span:before, #zornet_ru_ksanimga.active span:after {
  top: 0;
}

/* Наклоняем псевдо-элементы под углом 45 градусов, но в разные стороны */
#zornet_ru_ksanimga.active span:before {
  transform: rotate(45deg);
}
#zornet_ru_ksanimga.active span:after {
  transform: rotate(-45deg);
}

JavaScript

$('#zornet_ru_ksanimga').click(function(){
    $(this).toggleClass('active');
});