in this tutorial, we will see together how to make a beautiful and simple hamburger button using HTML and CSS, it's a very simple and quick tutorial so let's start it.
Video tutorial
HTML Code
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="Humberger">
<div class="bar"></div>
</div>
</body>
</html>
CSS Code
body{
background-color: #4486f6;
}
.Humberger{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 40px;
height: 35px;
}
.bar{
position: absolute;
top: 15px;
display: block;
width: 40px;
height: 5px;
background-color: #fafafa;
transition: .4s;
}
.Humberger::after{
content: '';
position: absolute;
left: 0;
display: block;
width: 40px;
height: 5px;
background-color: #fafafa;
top: 0px;
transition: .4s;
}
.Humberger::before{
content: '';
position: absolute;
left: 0;
top: 30px;
display: block;
width: 40px;
height: 5px;
background-color: #fafafa;
transition: .4s;
}
.Humberger:hover .bar{
opacity: 0;
}
.Humberger:hover.Humberger::after{
top: 50%;
transform-origin: center;
transform: rotate(45deg);
}
.Humberger:hover.Humberger::before{
top: 50%;
transform: rotate(-45deg);
}
and that's it , of corse you can make this code better by adding a javascript event listener
you can download the project file from this link : Download
Make a Hamburger Button using HTML and CSS
Reviewed by Medics
on
August 03, 2019
Rating:
Reviewed by Medics
on
August 03, 2019
Rating:
No comments: