<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.