Merge pull request #161 from Jeconias/master

[FEATURE] Adding simple way to build hamburger button.

snippets/hamburger-button.md

@@ -0,0 +1,64 @@
+---
+title: Hamburguer Button
+tags: interactivity,beginner
+---
+
+This is a way to build simple hamburger button for menu bar.
+
+```html
+<button class="hb"></button>
+```
+
+```css
+.hb,
+.hb:before,
+.hb:after {
+  position: relative;
+  width: 30px;
+  height: 5px;
+  border: none;
+  outline: none;
+  background-color: #333;
+  border-radius: 3px;
+  transition: 0.5s;
+  cursor: pointer;
+}
+
+.hb:before,
+.hb:after {
+  content: '';
+  position: absolute;
+  top: -7.5px;
+  left: 0;
+}
+
+.hb:after {
+  top: 7.5px;
+}
+
+.hb:hover {
+  background-color: transparent;
+}
+
+.hb:hover:before,
+.hb:hover:after {
+  top: 0;
+}
+
+.hb:hover::before {
+  transform: rotate(45deg);
+}
+
+.hb:hover::after {
+  transform: rotate(-45deg);
+}
+```
+
+#### Explanation
+
+- Use a `<button>` element for the middle bar of the hamburger icon.
+- Use the `::before` and `::after` pseudo-elements to create the top and bottom bars of the icon.
+- Use `position: relative` on the `<button>` and `position: absolute` on the pseudo-elements to place them appropriately.
+- Use the `:hover` pseudo-selector to rotate `:before` to `45deg` and `:after` to `-45deg` and hide the center bar using`:background-color` transparent.
+
+#### Browser support