Jump to content

Pure CSS Hamburger Button w/ Transition


Recommended Posts

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>
			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 {
					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;
					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 */
		<input type="checkbox" id="hamburgerButtonX" role="button" />
		<label class="hamburgerLabelX" for="hamburgerButtonX">
			<span class="hamburgerX"></span>



Link to comment
Share on other sites

  • 2 months later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...