Jump to content
DarkxPunk

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

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...