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:
Top comments (0)