CSS
body {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/escheresque_ste.png');
}
.menu {
display: inline-block;
position: absolute;
width: 56px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 64px;
font-family: "Raleway";
color: #fff;
cursor: pointer;
}
.menu::before,
.menu::after {
position: absolute;
transition: 0.4s ease;
opacity: 0;
pointer-events: none;
}
.menu:before {
content: "M \00a0 \00a0 \00a0 \00a0 \00a0U";
top: -50px;
left: -100%;
width: 215px;
}
.menu:after {
content: "N";
top: 40px;
left: 96%;
}
.menu:hover::before,
.menu:hover::after {
top: -16px;
opacity: 1;
transition: 0.2s ease, opacity 0.17s 0.03s ease-in;
}
.bar {
width: 80%;
height: 2px;
background: #1abc9c;
margin: 0 auto 18px;
transition: transform 0.4s ease;
}
/*.menu:hover .bar {*/
/* transform: rotate(-10deg);*/
/*}*/
