Changed spans to pseudo-elements. #161

snippets/hamburger-button.md

@@ -6,59 +6,60 @@ tags: interactivity,beginner
 This is a way to build simple hamburger button for menu bar.
 
 ```html
-<div class="hb-container">
+<button class="hb"></button>
-  <span></span>
-  <span></span>
-  <span></span>
-</div>
 ```
 
 ```css
-.hb-container {
+.hb,
-  width: 30px;
+.hb:before,
-  height: 30px;
+.hb:after {
   position: relative;
-  display: flex;
+  width: 30px;
-  flex-direction: column;
+  height: 5px;
-  align-items: center;
+  padding: 2px;
-  justify-content: center;
+  border: none;
+  outline: none;
+  border-radius: 3px;
+  transition: 0.5s;
   cursor: pointer;
 }
 
-.hb-container span {
+.hb:before,
-  width: 30px;
+.hb:after {
-  height: 5px;
+  content: '';
-  border-radius: 3px;
+  position: absolute;
-  margin: 2px 0;
+  top: -7.5px;
-  background-color: #333;
+  left: 0;
-  transition: 0.5s;
 }
 
-.hb-container:hover span {
+.hb:after {
-  margin: 0;
+  top: 7.5px;
 }
-.hb-container:hover :nth-child(2) {
+
-  opacity: 0;
+.hb:hover {
+  background-color: transparent;
 }
-.hb-container:hover :first-child {
+
-  position: absolute;
+.hb:hover:before,
-  transform: rotate(-45deg);
+.hb:hover:after {
+  top: 0;
 }
-.hb-container:hover :last-child {
+
-  position: absolute;
+.hb:hover::before {
   transform: rotate(45deg);
 }
+
+.hb:hover::after {
+  transform: rotate(-45deg);
+}
 ```
 
 #### Explanation
 
-- You need of two ou three `:span` to stack.
+- You need one button to middle bar.
-- Keep them in rows using `:display-flex`.
+- Use the pseudo-elements `:before` and `:after` to create bar top and bottom.
-- Use `:hover` for rotate first `:span` for `-45deg` and last `45deg`.
+- Keep them in rows using position `:relative` in the `:button` and position `:aboslute` in `:before` and `:after`.
-- If you use three `:span`, use `:opacity` for hide the middle child of container.
+- Use `:hover` for rotate `:before` for `45deg`, `:after` to `-45deg` and hide bar center using `:background-color` transparent.
 - Bonus: You can use JavaScript to manipulate CSS and keep `:X`.
 
 #### Browser support
-
-- https://caniuse.com/#search=transform
-- https://caniuse.com/#search=display%20flex