DarkxPunk Posted February 5, 2016 Share Posted February 5, 2016 Hey everyone, I made a cool little pure css hamburger button with a transition to a cross or x. Thought I would share it and open it up for improvements you guys can make. (If anyone thinks using borders is better, it is not, it displays incorrectly in Firefox.) <!DOCTYPE html> <html> <head> <style> body { margin: 10rem; background: #020202; text-align: center; } /* Hamburger Button X */ #hamburgerButtonX { display: none; } #hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX, #hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::before, #hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::after { transition: background-color 0s linear 0.2s, top 0.2s linear 0s, transform 0.2s linear 0.4s; } #hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX { background-color: transparent; } #hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::before { top: 0em; transform: rotate(45deg) scale(0.8); } #hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::after { top: -0.3em; transform: rotate(-45deg) scale(0.8); } .hamburgerLabelX { display: inline-block; cursor: pointer; } .hamburgerX,.hamburgerX::before,.hamburgerX::after { content: ""; background-color: #fcfcfc; margin: 0; border: 0; border-radius: 25px; padding: 0; width: 2.5em; height: 0.3em; display: block; position: relative; top: 0; left: 0; font-size: 10px; transition: background-color 0s linear 0.4s, top 0.2s linear 0.5s, transform 0.2s linear 0.2s; } .hamburgerX { margin: 0.6em 0; } .hamburgerX::before { top: -0.6em; } .hamburgerX::after { top: 0.3em; } /* Hamburger Button X */ </style> </head> <body> <input type="checkbox" id="hamburgerButtonX" role="button" /> <label class="hamburgerLabelX" for="hamburgerButtonX"> <span class="hamburgerX"></span> </label> </body> </html> Link to comment Share on other sites More sharing options...
casak Posted April 18, 2016 Share Posted April 18, 2016 The hamburger blank lines do not all have the same height (Chrome) Bye Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now