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

Кнопка бургер меню для мобильного меню на чистом 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%
}
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime