Free Hand-Picked CSS hamburger menu icons. Find the demo and download.
SVG CSS3 Menu / Burger Button
![36 CSS Hamburger Menu Icons 1 SVG CSS3 Menu / Burger Button](https://www.w3tweaks.com/wp-content/uploads/2020/04/svg-css3-menu-burger-button.gif)
A collection of svg + svg masking combined with HTML and CSS3 animations used to create a nifty button.
Developed By: Kyle Henwood
- Made with HTML, CSS (SCSS), JS
- Created JULY 03, 2014 // Updated JULY 16, 2014
Navicon Transformation
![36 CSS Hamburger Menu Icons 2 Navicon Transformation](https://www.w3tweaks.com/wp-content/uploads/2020/04/navicon-transformation.gif)
CSS3 transitions used to create a navigation icon into a close button.
Developed By: Wouter
- Made with HTML, CSS, JS
- Created FEBRUARY 20, 2015 // Updated APRIL 13, 2015
Hamburger SVG Menu + Close Button
![36 CSS Hamburger Menu Icons 3 Hamburger SVG Menu + Close Button](https://www.w3tweaks.com/wp-content/uploads/2020/04/hamburger-svg-menu-close-button.gif)
SVG Hamburger animation using compass and jquery (coffeescript).
Developed By: apptension
- Made with HTML, CSS (SCSS), JS (CoffeeScript)
- Created MARCH 28, 2015
Animated SVG Hamburgers
![36 CSS Hamburger Menu Icons 4 Animated SVG Hamburgers](https://www.w3tweaks.com/wp-content/uploads/2020/04/animated-svg-hamburgers.gif)
Developed By: Jesse Couch
- Made with HTML, CSS (SCSS), JS
- Created MARCH 18, 2015 // Updated MARCH 19, 2015
Hamburger Obligatory Menu Button
![36 CSS Hamburger Menu Icons 5 36 CSS Hamburger Menu Icons 1](https://www.w3tweaks.com/wp-content/uploads/2020/04/Hamburger-icon-and-close-icon-with-animation.gif)
Just another hamburger menu animation. Hover to see the magic.
Developed By: Kyle Ehrlich
- Made with HTML, CSS (SCSS), JS
- Created MARCH 27, 2015
Hamburger Hover Menu Animation
![36 CSS Hamburger Menu Icons 6 36 CSS Hamburger Menu Icons 2](https://www.w3tweaks.com/wp-content/uploads/2020/04/hamburger-hover-menu-animation.gif)
Just another hamburger menu animation. Hover to see the magic.
Developed By: Sebastian Popp
- Made with HTML, CSS (Less)
- Created MARCH 31, 2015 // Updated APRIL 02, 2015
Open Close Hamburger Menu Animation
![36 CSS Hamburger Menu Icons 7 Open Close Hamburger Menu Animation](https://www.w3tweaks.com/wp-content/uploads/2020/04/open-close-hamburger-menu-icon.gif)
inspired from dribbble.com CSS3 open close switching transition
Developed By: Vineeth.TR
- Made with HTML (Pug), CSS (SCSS)
- Created MARCH 28, 2015 // Updated FEBRUARY 06, 2018
Beautiful Animated CSS Hamburger Menu Icon
![36 CSS Hamburger Menu Icons 8 Open Close Hamburger Menu Animation](https://www.w3tweaks.com/wp-content/uploads/2020/04/Hamburger-icon-and-close-icon-with-animation-1.gif)
Developed By: Diego Hernandez
- Made with HTML, CSS, JS
- Created APRIL 12, 2015 // Updated OCTOBER 26, 2015
Animated CSS Hamburger Menu Icon
![36 CSS Hamburger Menu Icons 9 36 CSS Hamburger Menu Icons 3](https://www.w3tweaks.com/wp-content/uploads/2020/04/animated-css-hamburger-menu-icon.gif)
CSS icon that animates into a close icon on click using CSS transitions.
Developed By: Chris Mabry
- Made with HTML, CSS, JS
- Created APRIL 17, 2015
Animated Hamburger Menu
![36 CSS Hamburger Menu Icons 10 36 CSS Hamburger Menu Icons 4](https://www.w3tweaks.com/wp-content/uploads/2020/04/animated-hamburger-menu.gif)
Animated hamburger menu. It transforms into a close icon when clicked.
Developed By: Husni Munaya
- Made with HTML, CSS (SCSS), JS
- Created APRIL 26, 2015 // Updated MARCH 22, 2018
Jumping Hamburger Menu Icon
![36 CSS Hamburger Menu Icons 11 36 CSS Hamburger Menu Icons 5](https://www.w3tweaks.com/wp-content/uploads/2020/04/jumping-hamburger-menu-icon.gif)
Playing around with CSS3’s nth: selector and creating the famous hamburger menu!
Developed By: Jack Thomson
- Made with HTML (Slim), CSS (SCSS), JS
- Created APRIL 28, 2015 // Updated MAY 10, 2015
Spinning Social Button
![36 CSS Hamburger Menu Icons 12 Spinning Social Button](https://www.w3tweaks.com/wp-content/uploads/2020/04/spinning-social-button-.gif)
Its a spinning social button with some CSS animations. using jQuery to add classes on focus and click.
Developed By: Jamie Pettman
- Made with HTML, CSS (SCSS), JS
- Created APRIL 28, 2015
Transitioning Two Div Tasty Burger Menu
![36 CSS Hamburger Menu Icons 13 36 CSS Hamburger Menu Icons 6](https://www.w3tweaks.com/wp-content/uploads/2020/04/tasty-burger-menu.gif)
A simple way of doing a transitioning burger menu.
Developed By: Stephen Nelson
- Made with HTML, CSS, JS
- Created APRIL 29, 2015 // Updated MAY 01, 2015
Hamburger menu
![36 CSS Hamburger Menu Icons 14 Hamburger menu](https://www.w3tweaks.com/wp-content/uploads/2020/04/hamburger-menu.gif)
Developed By: Jason Ormand
- Made with HTML, CSS (SCSS), JS
- Created MAY 04, 2015
Simple pulldown/hamburger menu
![36 CSS Hamburger Menu Icons 15 Simple pulldown/hamburger menu](https://www.w3tweaks.com/wp-content/uploads/2020/04/simple-pulldown-hamburger-menu.gif)
A really simple, reusable, pulldown menu that closes automatically with minimal code and opens with slick animations. Now also has a mobile view that just works!
Developed By: Gerwin van Royen
- Made with HTML, CSS, JS
- Created MAY 05, 2015 // Updated DECEMBER 15, 2015
Hamburger to arrow and to close
![36 CSS Hamburger Menu Icons 16 Hamburger to arrow to close](https://www.w3tweaks.com/wp-content/uploads/2020/04/hamburger-to-arrow-to-close.gif)
Demo Image: Hamburger to arrow to close
Developed By: Razvan Spatariu
- Made with HTML, CSS (SCSS)
- Created MARCH 26, 2015
Hamburger Menu to Book Menu
![36 CSS Hamburger Menu Icons 17 Hamburger Menu to Book Menu](https://www.w3tweaks.com/wp-content/uploads/2020/04/hamburger-menu-to-book-menu.gif)
For Booksaying. Booksaying; Favorite Sayings Pool. So, what you have in the world of your book, add, store and share!.
Developed By: Halil İbrahim Nuroğlu
- Made with HTML, CSS (Less), JS
- Created JUNE 03, 2015
CSS full screen burger menu
![36 CSS Hamburger Menu Icons 18 Full screen burger menu](https://www.w3tweaks.com/wp-content/uploads/2020/04/burger-menu.gif)
A minimal full screen burger menu.
Developed By: Vivek Kumar Bansal
- Made with HTML, CSS (Less), JS (Babel)
- Created JUNE 27, 2015
Subtle Bouncy Navigation
![36 CSS Hamburger Menu Icons 19 Subtle Bouncy Navigation](https://www.w3tweaks.com/wp-content/uploads/2020/04/subtle-bouncy-navigation.gif)
Needed to kill some time so I made this simple Bouncy Navigation and playing around with Bicubic Bezier!
Developed By: Jack Thomson
- Created with HTML (Haml), CSS (SCSS), JS
- Created AUGUST 20, 2015 // Updated SEPTEMBER 03, 2015
Extra – Menu Toggle
![36 CSS Hamburger Menu Icons 20 36 CSS Hamburger Menu Icons 7](https://www.w3tweaks.com/wp-content/uploads/2020/04/extra-menu-toggle.gif)
Developed By: Andy Tran
- Created with HTML (Pug), CSS (Less), JS
- Created SEPTEMBER 29, 2015 // Updated OCTOBER 30, 2015
Simple CSS Menu Icon Hamburger
![36 CSS Hamburger Menu Icons 21 Simple CSS Menu Icon Hamburger](https://www.w3tweaks.com/wp-content/uploads/2020/04/simple-css-hamburger-menu-icon.gif)
Developed By: Quentin Morel
- Created with HTML, CSS (SCSS), JS
- Created FEBRUARY 21, 2015 // Updated APRIL 11, 2015
Simple CSS Hamburger Menu Icon
![36 CSS Hamburger Menu Icons 22 36 CSS Hamburger Menu Icons 8](https://www.w3tweaks.com/wp-content/uploads/2020/04/simple-css-menu-icon-hamburger.gif)
CSS Humberger menu icon using new CSS animation-fill-mode (IE10+) feature.
Developed By: Quentin Morel
- Created with HTML, CSS (SCSS), JS
- Created NOVEMBER 07, 2015 // Updated MARCH 10, 2016
Hamburger Menu Lines Animation
![36 CSS Hamburger Menu Icons 23 Hamburger Menu Lines Animation](https://www.w3tweaks.com/wp-content/uploads/2020/04/hamburger-menu-lines-animation.gif)
Developed By: Nikolay Talanov
- Created with HTML, CSS (SCSS), JS
- Created NOVEMBER 15, 2015 // Updated NOVEMBER 22, 2015
CSS Hamburger
![36 CSS Hamburger Menu Icons 24 CSS Hamburger](https://www.w3tweaks.com/wp-content/uploads/2020/04/css-hamburger.gif)
Developed By: Stix
- Created with HTML, CSS
- Created FEBRUARY 10, 2016 // Updated FEBRUARY 12, 2016
Hamburger Menu Buttons
![36 CSS Hamburger Menu Icons 25 36 CSS Hamburger Menu Icons 9](https://www.w3tweaks.com/wp-content/uploads/2020/04/hamburger-menu-buttons.gif)
Simple menu buttons. Only developing for chrome at the moment so support on other browsers is limited.
Developed By: Nuro Azhar
- Created with HTML, CSS (SCSS), JS
- Created DECEMBER 16, 2014 // Updated SEPTEMBER 07, 2018
Hamburger Menu Inspiration
![36 CSS Hamburger Menu Icons 26 36 CSS Hamburger Menu Icons 10](https://www.w3tweaks.com/wp-content/uploads/2020/04/hamburger-menu-inspiration.gif)
Overflow menu button which can be used with media queries on smaller sceens. Animation on hover.
Developed By: Aditya Bhandari
- Created with HTML, CSS (SCSS)
- Created MARCH 01, 2016
Colorful Flower Popup Menu
![36 CSS Hamburger Menu Icons 27 36 CSS Hamburger Menu Icons 11](https://www.w3tweaks.com/wp-content/uploads/2020/04/colourful-flower-popup-menu.gif)
This mobile inspired flower popup menu is a colourful fun project. Feel free to use it however you like.
Developed By: Jasper LaChance
- Created with HTML, CSS
- Created MARCH 12, 2016 // Updated MAY 24, 2017
POP Out Navigation
![36 CSS Hamburger Menu Icons 28 POP Out Navigation](https://www.w3tweaks.com/wp-content/uploads/2020/04/pop-out-navigation.gif)
A CSS experiment with a menu icon that POPS.
Developed By: Ryan Mulligan
- Created with HTML (Pug) , CSS (SCSS), JS
- Created APRIL 05, 2016 // Updated APRIL 08, 2016
Floatting Draggable Menu (Messenger like)
![36 CSS Hamburger Menu Icons 29 36 CSS Hamburger Menu Icons 12](https://www.w3tweaks.com/wp-content/uploads/2020/04/floatting-draggable-menu-messenger-like.gif)
the messenger menu sexy. Using anime.js & Foundation Icon Fonts 3.
Developed By: Andy Pagès
- Created with HTML, CSS (SCSS), JS
- Created AUGUST 17, 2016 // Updated APRIL 04, 2019
CSS Hamburger Menu Icon
![36 CSS Hamburger Menu Icons 30 CSS Hamburger Menu Icon](https://www.w3tweaks.com/wp-content/uploads/2020/04/css-hamburger-menu-icon.gif)
Prototype of a navicon using CSS only.
Developed By: Jamison Wright
- Created with HTML, CSS
- Created FEBRUARY 02, 2016
Hidden Hamburger Side menu | CSS Only
![36 CSS Hamburger Menu Icons 31 36 CSS Hamburger Menu Icons 13](https://www.w3tweaks.com/wp-content/uploads/2020/04/hidden-side-menu-css-only.gif)
Hidden side menu and hamburger animation using CSS only.
Developed By: Joshua Ward
- Created with HTML, CSS (SCSS)
- Created JUNE 25, 2018
Menu icon with a spin
![36 CSS Hamburger Menu Icons 32 Menu icon with a spin](https://www.w3tweaks.com/wp-content/uploads/2020/04/menu-icon-with-a-spin.gif)
Developed By: Sean B
- Created with HTML, CSS (SCSS)
- Created JUNE 25, 2018
Hamburger Menu Button Interaction
![36 CSS Hamburger Menu Icons 33 36 CSS Hamburger Menu Icons 14](https://www.w3tweaks.com/wp-content/uploads/2020/04/hamburger-menu-button-interaction.gif)
Hamburger Menu Button Interaction.
Developed By: Himalaya Singh
- Created with HTML, CSS
- Created JANUARY 27, 2019 // Updated JUNE 18, 2019
Randomly generated Pure CSS menu icons w/ markup and SCSS
![36 CSS Hamburger Menu Icons 34 Randomly generated Pure CSS menu icons with markup and SCSS](https://www.w3tweaks.com/wp-content/uploads/2020/04/randomly-generated-pure-css-menu-icons-with-markup-and-scss.gif)
Developed By: Jamie Coulter
- Created with HTML (Haml), CSS (SCSS), JS
- Created FEBRUARY 13, 2019
SVG Hamburger Menu Icon Animation Collection
![36 CSS Hamburger Menu Icons 35 36 CSS Hamburger Menu Icons 15](https://www.w3tweaks.com/wp-content/uploads/2020/04/css-hamburger-menu-icons.gif)
A collection of juicy hamburger menu icon animations. SVG manipulations handled with brand spanking new AnimateAnythingJS JavaScript library.
Developed By: Matthew Main
- Created with HTML, CSS, JS
- Created SEPTEMBER 23, 2019 // Updated SEPTEMBER 30, 2019
Flipping Menu Toggle
![36 CSS Hamburger Menu Icons 36 36 CSS Hamburger Menu Icons 16](https://www.w3tweaks.com/wp-content/uploads/2020/04/flipping-menu-toggle.gif)
What the flip is this? Not ideal for prod but here’s a fun menu toggle experiment with css animations.
Developed By: Ryan Mulligan
- Created with HTML (Pug), CSS (SCSS), JS
- Created DECEMBER 20, 2017 // Updated JANUARY 10, 2018
Leave a Reply