Pure CSS Hamburger Button w/ Transition

DarkxPunk · 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>

casak · April 18, 2016

The hamburger blank lines do not all have the same height (Chrome)

Bye

Sign In

Pure CSS Hamburger Button w/ Transition

Recommended Posts

DarkxPunk

Link to comment

Share on other sites

casak

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity