Кнопка бургер меню для мобильного меню на чистом CSS

Всем привет сегодня я вам покажу как сделать кнопку для бургер меню. Данная кнопка будет написанная на чистом CSS и HTML. Кнопка состоит из 3 маленьких полос и часто используется для мобильных меню

HTML

Здесь мы прописываем только один блок для кнопки, для примера я создал элемент с классом hamburger. Полоски будут создаваться в помощью стилей, мы будет создавать вторую и третью полоски через свойства border-bottom и border-top, а центральная полоска будет создаваться через псевдоэлемент before.

<span class="hamburger"></span>

CSS

CSS код тоже простой. Здесь для понимания я все расписал.

.hamburger {
     position: relative;
     display: block;
     width: 50px;
     height: 25px;
     margin: 20px auto;
     border-top: 5px solid #fff;
     border-bottom: 5px solid #fff;
}
.hamburger:before {
     content: "";
     position: absolute;
     top: 10px;
     left: 0px;
     width: 100%;
     border-top: 5px solid #fff;
}

Ещё один вариант кнопки

<span class="hamburger span-col-9">
      <hr class="line1">
      <hr class="line2">
      <hr class="line3">
</span>

.hamburger 
{
    position: relative
    display: flex
    flex-direction: column
    row-gap: 5px
    width: 50px
    height: fit-content
    margin: 20px auto
}
.hamburger  hr
 {
   width: 100%
   height: 5px
   border: none
   background: #fff
   margin: 0 0 0 auto
}
.hamburger hr.line2
 {
   width: 63%
}
.hamburger hr.line3
 {
    width: 33%
}