<div class="hamburger-menu">
    <a href="#" class="menu-btn">
        <span></span>
    </a>
</div>
.hamburger-menu {
    display: flex;
    align-items: center;
}

.menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #FB7DA4;
    background-image: linear-gradient(to right, #FBA9A2, #FB7DA4);
    border-radius: 50%;
    margin-right: 30px;
}

.hamburger-menu span::before,
.hamburger-menu span::after {
    content: '';
    display: block;
}

.hamburger-menu span,
.hamburger-menu span::before,
.hamburger-menu span::after {
    background-color: #fff;
    width: 16px;
    height: 2px;
}

.hamburger-menu span::before {
    transform: translateY(-5px);
}

.hamburger-menu span::after {
    transform: translateY(5px);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.