Меню с иконкой гамбургер на чистом css

Очень часто требуется при верстке добавлять к разделам "Гамбургер". Чтобы сделать его чистом CSS много кода не потребуется.

Для создания такого меню воспользуемся псевдоэлементами :after :before

<span class="gamb">Кнопка</span>
<style type="text/css">
.gamb:before{
    content: '';
    box-shadow: 0 6px #93cce6,0 12px #93cce6;
    position: absolute;
    width: 50%;
    height: 3px;
    background: #93cce6;
    top: 30%;
    left: 25%;
    border-radius: 10px;
    transition: all .4s linear;
}
</style>

Вид кнопки вот такой:

Чтобы при наведении гамбургер превратился в крестик - пропишем стиль

.gamb:hover:before {
    content: '';
    position: absolute;
    width: 50%;
    height: 3px;
    background: #93cce6;
    top: 44%;
    left: 25%;
    border-radius: 10px;
    transform: rotate(45deg);
}
.gamb:hover:after {
    content: '';
    position: absolute;
    width: 50%;
    height: 3px;
    background: #93cce6;
    top: 44%;
    left: 25%;
    border-radius: 10px;
    transform: rotate(-45deg);
    box-shadow: none;
}

При наведении кнопка будет вида:

Цвет и стиль кнопки можно менять как Вам угодно

Комментарии к статье
Защита от роботов

css, меню