<div class="hamburger">
<button class="hamburger__button">
Menu <span class="hamburger__icon"></span>
</button>
</div>
body {
width: 100%;
height: 100vh;
background-color: #222;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.hamburger {
text-align: center;
}
.hamburger__button {
position: relative;
width: 120px;
height: 120px;
border: none;
outline: none;
border-radius: 50%;
cursor: pointer;
background-color: #484848;
overflow: hidden;
text-indent: 100%;
color: transparent;
white-space: nowrap;
}
.hamburger__icon,
.hamburger__icon::before,
.hamburger__icon::after {
position: absolute;
width: 44px;
height: 4px;
border-radius: 4px;
background-color: #fff;
}
.hamburger__icon {
top: calc(50% - 2px);
left: calc(50% - 22px);
transition: all 0.3s linear;
}
.hamburger__icon::before,
.hamburger__icon::after {
content: "";
left: 0;
}
.hamburger__icon::before {
bottom: 12px;
}
.hamburger__icon::after {
top: 12px;
transition: all 0.3s linear;
}
.hamburger__button:hover .hamburger__icon {
height: 10px;
width: 110px;
left: 5px;
top: calc(50% - 4px);
transform: rotate(-45deg);
background-color: #e20650;
}
.hamburger__button:hover .hamburger__icon::after {
width: 110px;
height: 10px;
top: -1px;
transform: rotate(-270deg);
background-color: #e20650;
}
.hamburger__button:hover .hamburger__icon::before {
transform: scale(0);
}
.box {
width: 100px;
height: 100px;
background-color: rebeccapurple;
border-radius: 5px;
opacity: 0;
visibility: hidden;
position: relative;
top: 0px;
transform: scale(0) translatey(-1000px);
transition: 1s;
}
.box.slide-in {
transform: scale(1) translatey(0);
opacity: 1;
visibility: visible;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.