Atomic Hamburger Menu CSS
How do I make an atomic hamburger menu css?
Building assets for a math and science tutoring website. Thought this little guy was cool. More to come soon.. What is a atomic hamburger menu css? How do you make a atomic hamburger menu css? This script and codes were developed by Alex Coven on 09 August 2022, Tuesday.
Atomic Hamburger Menu CSS Previews
Atomic Hamburger Menu CSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Atomic Hamburger Menu CSS</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #F26451;
}
img { width:30px; position:absolute; bottom:20px; right:20px;
}
p { position: absolute; top: 50%; left: 50%; color: #fff; text-transform: uppercase; letter-spacing: 4px; font-size: 10px; font-family: "helvetica" sans; text-align: center; margin-top: 45px; margin-left: -85px;
}
button { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; transition: all 300ms cubic-bezier(.61, .01, .42, 1); cursor: pointer; background: transparent; border: 0px;
}
div { height: 0px; border: 1.5px solid #fff; width: 22px; display: block; position: absolute; transition: all 300ms cubic-bezier(.61, .01, .42, 1); background:#fff;
}
button:hover { transition-delay: 100ms; transform: scale(1.1);
}
button:hover div:nth-child(3):before { width: 2px; height: 2px; border-radius: 50%; background: #F26451;
}
button:hover div { border: 2px solid #fff; height: 9px; border-radius: 50%; margin-left: -1px; margin-top: 2px; animation: atom 300ms linear 1; width: 25px; top: 0px; background:transparent;
}
button:focus { outline: 0px;
}
div:nth-child(1) { top: 0px;
}
div:nth-child(2) { top: 8px;
}
div:nth-child(3) { top: 16px;
}
div:nth-child(3):before { opacity: 0; animation: ball 1.5s linear infinite; content: ''; border: 2px solid #fff; display: block; position: relative; top: 0.25px;
}
button:hover div:nth-child(1) { transform: rotate(-33deg);
}
button:hover div:nth-child(2) { transform: rotate(90deg);
}
button:hover div:nth-child(3) { transform: rotate(33deg);
}
button:hover div:nth-child(3):before { opacity: 1; transition: opacity 600ms cubic-bezier(.61, .01, .42, 1); ;
}
button:active:hover div:nth-child(3):before,
button:active div:nth-child(3):before,
button:active div:nth-child(2) { opacity: 0; transition: all 200ms;
}
button:active div { border: 1.5px solid #fff; height: 0px; border-radius: 0%; margin-left: -1px; margin-top: 6px; animation: division 300ms linear 1; width: 25px; top: 0px;
}
button:active div:nth-child(2) { width: 0px;
}
button:active div:nth-child(3) { transform: rotate(45deg);
}
button:active div:nth-child(1) { transform: rotate(-45deg);
}
@keyframes atom { 0% { transform: rotate(180deg); }
}
@keyframes division { 0% { transform: rotate(180deg); }
}
@keyframes ball { 0% { left: -20%; top: 10%; } 10% { left: 10%; top: -35%; } 25% { left: 45%; top: -50%; } 40% { left: 80%; top: -20%; } 50% { left: 98%; top: 18%; } 60% { left: 80%; top: 50%; } 75% { left: 45%; top: 80%; } 90% { left: 0%; top: 60%; } 100% { left: -20%; top: 10%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <button> <div></div> <div></div> <div></div>
</button>
<p>hover & hold me down</p>
<a target="_blank" href="https://dribbble.com/Alexcoven"><img src="http://i.imgur.com/kF8rP6D.png"></a> <script src="js/index.js"></script>
</body>
</html>Atomic Hamburger Menu CSS - Script Codes CSS Codes
body { background: #F26451;
}
img { width:30px; position:absolute; bottom:20px; right:20px;
}
p { position: absolute; top: 50%; left: 50%; color: #fff; text-transform: uppercase; letter-spacing: 4px; font-size: 10px; font-family: "helvetica" sans; text-align: center; margin-top: 45px; margin-left: -85px;
}
button { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; transition: all 300ms cubic-bezier(.61, .01, .42, 1); cursor: pointer; background: transparent; border: 0px;
}
div { height: 0px; border: 1.5px solid #fff; width: 22px; display: block; position: absolute; transition: all 300ms cubic-bezier(.61, .01, .42, 1); background:#fff;
}
button:hover { transition-delay: 100ms; transform: scale(1.1);
}
button:hover div:nth-child(3):before { width: 2px; height: 2px; border-radius: 50%; background: #F26451;
}
button:hover div { border: 2px solid #fff; height: 9px; border-radius: 50%; margin-left: -1px; margin-top: 2px; animation: atom 300ms linear 1; width: 25px; top: 0px; background:transparent;
}
button:focus { outline: 0px;
}
div:nth-child(1) { top: 0px;
}
div:nth-child(2) { top: 8px;
}
div:nth-child(3) { top: 16px;
}
div:nth-child(3):before { opacity: 0; animation: ball 1.5s linear infinite; content: ''; border: 2px solid #fff; display: block; position: relative; top: 0.25px;
}
button:hover div:nth-child(1) { transform: rotate(-33deg);
}
button:hover div:nth-child(2) { transform: rotate(90deg);
}
button:hover div:nth-child(3) { transform: rotate(33deg);
}
button:hover div:nth-child(3):before { opacity: 1; transition: opacity 600ms cubic-bezier(.61, .01, .42, 1); ;
}
button:active:hover div:nth-child(3):before,
button:active div:nth-child(3):before,
button:active div:nth-child(2) { opacity: 0; transition: all 200ms;
}
button:active div { border: 1.5px solid #fff; height: 0px; border-radius: 0%; margin-left: -1px; margin-top: 6px; animation: division 300ms linear 1; width: 25px; top: 0px;
}
button:active div:nth-child(2) { width: 0px;
}
button:active div:nth-child(3) { transform: rotate(45deg);
}
button:active div:nth-child(1) { transform: rotate(-45deg);
}
@keyframes atom { 0% { transform: rotate(180deg); }
}
@keyframes division { 0% { transform: rotate(180deg); }
}
@keyframes ball { 0% { left: -20%; top: 10%; } 10% { left: 10%; top: -35%; } 25% { left: 45%; top: -50%; } 40% { left: 80%; top: -20%; } 50% { left: 98%; top: 18%; } 60% { left: 80%; top: 50%; } 75% { left: 45%; top: 80%; } 90% { left: 0%; top: 60%; } 100% { left: -20%; top: 10%; }
}Atomic Hamburger Menu CSS - Script Codes JS Codes
//nope
| Developer | Alex Coven |
| Username | alcoven |
| Uploaded | August 09, 2022 |
| Rating | 4.5 |
| Size | 3,301 Kb |
| Views | 103,224 |
Do you need developer help for Atomic Hamburger Menu CSS?
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!
Alex Coven (alcoven) Script Codes
| Name | Size |
| Stackoverflow nth-child answer | 1,469 Kb |
| Hover triangle wipe css | 2,559 Kb |
| Gooey Menu CSS no SVG | 3,719 Kb |
| SVG Hand-Lettering Animation | 4,295 Kb |
| Menu Shelf | 7,738 Kb |
| Lucro Assets | 7,909 Kb |
| SVG Squid Swimming | 2,902 Kb |
| A Pen by Alex Coven | 2,569 Kb |
| Squid Swimming Spinning SVG Animation | 4,005 Kb |
| Atom Menu SVG Animation | 2,919 Kb |
Create amazing love letters 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!
Similar Scripts & Codes
| Name | Username | Size |
| Snow collision | Wojtek1150 | 3,542 Kb |
| Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
| Airbnb Homepage | SindhujaD | 2,480 Kb |
| Box Shadow Effects | Retrofuturistic | 2,143 Kb |
| Mega menu | DimaZubkov | 5,066 Kb |
| Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
| Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
| DFF Website | Hawcubite | 10,123 Kb |
| Cartoon Bomb | Tcmulder | 4,929 Kb |
| Break Out | AzazelN28 | 12,431 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!