Navigation Icon 3 lines to X

Developer
Size
2,053 Kb
Views
30,360

How do I make an navigation icon 3 lines to x?

Just testing my CSS skills to create 3 lines icon to X, though it can be arrow or any thing. Purely done with CSS3, just toggling class with jQuery.. What is a navigation icon 3 lines to x? How do you make a navigation icon 3 lines to x? This script and codes were developed by Satnam Singh on 07 October 2022, Friday.

Navigation Icon 3 lines to X Previews

Navigation Icon 3 lines to X - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Navigation Icon 3 lines to X</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="lines-button"> <div class="line"></div>
</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Navigation Icon 3 lines to X - Script Codes CSS Codes

body { text-align: center;
}
.lines-button { padding: 3em; display: inline-block; margin: 7em auto; text-align: center; cursor: pointer; transition: all .2s;
}
.lines-button:hover { -webkit-transform: scale3d(.8, .8, .8);
}
.line { background: rgba(255, 0, 0, .5); width: 6em; height: .8em; box-shadow: 0 0 0 3px red; border-radius: 1em; position: relative; transition: all .2s;
}
.line:before, .line:after { content: ''; background: rgba(255, 0, 0, .5); width: 6em; height: .8em; box-shadow: 0 0 0 3px red; border-radius: 1em; position: absolute; left: 0; -webkit-transform-origin: center center; transition: all .2s;
}
.line:before { background: rgba(0, 255, 0, .5); box-shadow: 0 0 0 3px green; top: -1.8em;
}
.line:after { background: rgba(0, 0, 255, .5); box-shadow: 0 0 0 3px blue; top: 1.8em;
}
.transform.lines-button .line { background: none; box-shadow: none;
}
.transform.lines-button .line:before { top: 0; -webkit-transform: rotate3d(0,0,1,-45deg); width: 6em;
}
.transform.lines-button .line:after { top: 0; -webkit-transform: rotate3d(0,0,1,45deg); width: 6em;
}

Navigation Icon 3 lines to X - Script Codes JS Codes

$('.lines-button').click(function() { $(this).toggleClass('transform');
});
Navigation Icon 3 lines to X - Script Codes
Navigation Icon 3 lines to X - Script Codes
Home Page Home
Developer Satnam Singh
Username rssatnam
Uploaded October 07, 2022
Rating 3
Size 2,053 Kb
Views 30,360
Do you need developer help for Navigation Icon 3 lines to X?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Satnam Singh (rssatnam) Script Codes
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!