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>
<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 post
Share on other sites
  • 2 months later...

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