diff --git a/snippets/hamburger-button.md b/snippets/hamburger-button.md
new file mode 100644
index 000000000..b5ce02ff8
--- /dev/null
+++ b/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
+<div class="hb-container">
+  <span></span>
+  <span></span>
+  <span></span>
+</div>
+```
+
+```css
+.hb-container {
+  width: 30px;
+  height: 30px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.hb-container span {
+  width: 30px;
+  height: 5px;
+  border-radius: 3px;
+  margin: 2px 0;
+  background-color: #333;
+  transition: 0.5s;
+}
+
+.hb-container:hover span {
+  margin: 0;
+}
+.hb-container:hover :nth-child(2) {
+  opacity: 0;
+}
+.hb-container:hover :first-child {
+  position: absolute;
+  transform: rotate(-45deg);
+}
+.hb-container:hover :last-child {
+  position: absolute;
+  transform: rotate(45deg);
+}
+```
+
+#### Explanation
+
+- You need of two ou three `:span` to stack.
+- Keep them in rows using `:display-flex`.
+- Use `:hover` for rotate first `:span` for `-45deg` and last `45deg`.
+- If you use three `:span`, use `:opacity` for hide the middle child of container.
+- Bonus: You can use JavaScript to manipulate CSS and keep `:X`.
+
+#### Browser support
+
+- https://caniuse.com/#search=transform
+- https://caniuse.com/#search=display%20flex
\ No newline at end of file