Turn Horizontal lines into a close button

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: