Create An Animated Menu Toggle Button | Html CSS & Javascript, step-by-step from scratch.
Source Code:
A Simple Markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated Menu Toggle Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="toggle">
<span></span>
<span></span>
<span></span>
</div>
<script src="app.js"></script>
</body>
</html>
Then a Couple of Lines of CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #e9ecef;
}
.toggle{
position: relative;
width: 70px;
height: 70px;
background: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
overflow: hidden;
}
.toggle span{
position: absolute;
width: 40px;
height: 4px;
background: #4263eb;
border-radius: 4px;
transition: 0.5s;
}
.toggle span:nth-child(1){
transform: translateY(-15px);
width: 25px;
left: 15px;
}
.toggle.active span:nth-child(1){
width: 40px;
transform: translateY(0px) rotate(45deg);
transition-delay: 0.125s;
}
.toggle span:nth-child(2){
transform: translateY(15px);
width: 15px;
left: 15px;
}
.toggle.active span:nth-child(2){
width: 40px;
transform: translateY(0px) rotate(315deg);
transition-delay: 0.25s;
}
.toggle.active span:nth-child(3){
transform: translateX(60px);
}
Follow us on YT
https://bit.ly/3oBQbc0
Top comments (4)
Thats a cool Animated Menu and not too much code thanks for sharing.
Hey Dev, I'm you liked it.
Happy Coding my friend!
I practiced this like 2 times, thank you for sharing. 🙌🏼
Hey Dev, I'm glad you liked it!