Turn Horizontal lines into a close button

#css #html

In this article, I'm going to show you how to turn Horizontal lines into a close button with very minimal coding using simple CSS.

Mostly we will use these horizontal lines to create a mobile menu. We can also call Horizontal lines as Navigation lines.

HTML Code looks like below:

<span> </span>
<span> </span>
<span> </span>

CSS Code to create Horizontal lines:

.navlines {
    width: 24px;
    height: 24px;
    position: relative;
}

.navlines span {
    position: absolute;
    width: 100%;
    border: 1.5px solid #582c83;
    border-radius: 9px;
    transition: all 0.5s ease;
}
.navlines span:nth-child(1) {
    top: 0px;
}
.navlines span:nth-child(2) {
    top: 10px;
    width: 18px;
}
.navlines span:nth-child(3) {
    top: 20px;
}

Horizontal lines ready, now we need to convert horizontal lines to close button.

CSS Code to turn Navigation lines to Close button:

.navlines:hover span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
}
.navlines:hover span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

.navlines:hover span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 50%;
}

Demo here: