Pure CSS Hamburger Button

Developer
Gigaleet
Size
2,160 Kb
Views
10,120
  1. Pure CSS Hamburger Button Previews
  2. Pure CSS Hamburger Button HTML Codes
  3. Pure CSS Hamburger Button CSS Codes

How do I make an pure css hamburger button?

What is a pure css hamburger button? How do you make a pure css hamburger button? This script and codes were developed by Gigaleet on 08 January 2023, Sunday.

Pure CSS Hamburger Button Previews
IQ Test

Pure CSS Hamburger Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Hamburger Button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="hamburger"><span></span></div>
</body>
</html>

Pure CSS Hamburger Button - Script Codes CSS Codes

.hamburger { display: block; width: 40px; height: 30px; margin: 0; cursor: pointer; position: relative;
}
.hamburger span { background-color: #000; display: inline-block; position: absolute; height: 5px; width: 40px; border-radius: 3px; top: 10px; -webkit-transition: all 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946) 0s; transition: all 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946) 0s;
}
.hamburger::before, .hamburger::after { position: absolute; content: ''; display: block; background: #000; height: 5px; width: 40px; border-radius: 3px; top: 0px; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946) 0s; transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946) 0s; transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946) 0s; transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946) 0s, -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946) 0s;
}
.hamburger::after { top: 20px;
}
.hamburger:hover span { background-color: transparent; -webkit-transform: translate(40px, 0); transform: translate(40px, 0);
}
.hamburger:hover::before, .hamburger:hover::after { -webkit-transform: rotate(-40deg); transform: rotate(-40deg); top: 10px;
}
.hamburger:hover::after { -webkit-transform: rotate(40deg); transform: rotate(40deg);
}
Pure CSS Hamburger Button - Script Codes
Pure CSS Hamburger Button - Script Codes
Home Page Home
Developer Gigaleet
Username Gigaleet
Uploaded January 08, 2023
Rating 3
Size 2,160 Kb
Views 10,120
Do you need developer help for Pure CSS Hamburger Button?

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!

Gigaleet (Gigaleet) Script Codes
Name
Modern Login Box
A Pen by Gigaleet
FlexBox Fixed Left Side Bar and Header Layout
Light Box
CSS placeholder labels
Status Loader
Modal Dialog
Create amazing SEO content 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!