Nesa344/Hamburger nav buttons.html Secret

## Hamburger nav buttons.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nav Checkbox</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

  <div class="nav-btn navbtn-1">
    <input type="checkbox" class="btn">
    <div class="lines">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
  </div>

    <div class="nav-btn navbtn-2">
      <input type="checkbox" class="btn">
      <div class="lines">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </div>

    <div class="nav-btn navbtn-3">
      <input type="checkbox" class="btn">
      <div class="lines">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </div>

  </body>
</html>

## style.css
/*== STEP 1 ==*//*Body Reset*/
body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #333;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  min-height: 100vh;
}

/*== STEP 2 ==*//*Main Container & Checkbox*/
.nav-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4em;
  height: 4em;
  position: relative;
}

.nav-btn .btn {
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  z-index: 2;
  transition: 0.6s;
}

/*== STEP 3 ==*//*Styles When the Checkbox is checked*/
.nav-btn .btn:checked ~ .lines .line:nth-child(1) {
  opacity: 0;
}

.nav-btn .btn:checked ~ .lines .line:nth-child(3) {
  transform: rotate(45deg) translate(-2em, 0.4em);
}

.nav-btn .btn:checked ~ .lines .line:nth-child(2) {
  transform: rotate(-45deg) translate(-1.8em, -0.6em);
}

/*== STEP 4 ==*//*Hamburger Lines*/
.nav-btn .btn,
.nav-btn .lines {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

/*== STEP 5 ==*//*Individual Line*/
.nav-btn .line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 0.3em;
  background: #fff;
  pointer-events: none;
  transition: 0.3s;
}
.nav-btn .line:nth-child(2) { top: 25%; }
.nav-btn .line:nth-child(3) { top: 75%; }


/*== STEP 6 ==*//*Additional v2 and v3 styles*/
.navbtn-2 .btn:checked ~ .lines .line:nth-child(1) {
  top: -1em;
}

.navbtn-3 .btn:checked ~ .lines .line:nth-child(1) {
  transform: rotate(180deg);
}
	/== STEP 1 ==//Body Reset/
	body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	background: #333;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	min-height: 100vh;
	}

	/== STEP 2 ==//Main Container & Checkbox/
	.nav-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4em;
	height: 4em;
	position: relative;
	}

	.nav-btn .btn {
	-webkit-appearance: none;
	outline: none;
	cursor: pointer;
	z-index: 2;
	transition: 0.6s;
	}

	/== STEP 3 ==//Styles When the Checkbox is checked/
	.nav-btn .btn:checked ~ .lines .line:nth-child(1) {
	opacity: 0;
	}

	.nav-btn .btn:checked ~ .lines .line:nth-child(3) {
	transform: rotate(45deg) translate(-2em, 0.4em);
	}

	.nav-btn .btn:checked ~ .lines .line:nth-child(2) {
	transform: rotate(-45deg) translate(-1.8em, -0.6em);
	}

	/== STEP 4 ==//Hamburger Lines/
	.nav-btn .btn,
	.nav-btn .lines {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	}

	/== STEP 5 ==//Individual Line/
	.nav-btn .line {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	height: 0.3em;
	background: #fff;
	pointer-events: none;
	transition: 0.3s;
	}
	.nav-btn .line:nth-child(2) { top: 25%; }
	.nav-btn .line:nth-child(3) { top: 75%; }


	/== STEP 6 ==//Additional v2 and v3 styles/
	.navbtn-2 .btn:checked ~ .lines .line:nth-child(1) {
	top: -1em;
	}

	.navbtn-3 .btn:checked ~ .lines .line:nth-child(1) {
	transform: rotate(180deg);
	}