247102f95d
The hamburger button page was titled "Hamburguer Button", so I corrected it to "Hamburger Button" (no `uer` at the end of hamburger, just `er`)
65 lines
1.2 KiB
Markdown
65 lines
1.2 KiB
Markdown
---
|
|
title: Hamburger 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
|