66 lines
1.1 KiB
Markdown
66 lines
1.1 KiB
Markdown
---
|
|
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
|
|
|
|
- You need one button to middle bar.
|
|
- Use the pseudo-elements `:before` and `:after` to create bar top and bottom.
|
|
- Keep them in rows using position `:relative` in the `:button` and position `:aboslute` in `:before` and `:after`.
|
|
- 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
|