Hamburger Button
Input
Output
HTML
<
link
rel
=
"stylesheet"
href
=
"https://fonts.googleapis.com
/css2?family=
Material+Symbols+Rounded"
/>
<
button
class
=
"button--hamburger"
type
=
"button"
>
<
span
class
=
"material-symbols-rounded"
>
menu
<
/
span
>
<
/
button
>
CSS
<
style
>
.button--hamburger
{
background-color
:
#1B304F
;
border
:
0
;
border-radius
:
20%
;
box-shadow
:
inset 2px 0px 4px rgba(0, 0, 0, 0.6),
inset -2px -4px 4px rgba(0, 0, 0, 0.6),
#1C0B3D 0px 2px 3px;
transition-duration
:
200ms
;
transition-property
:
background-color
,
box-shadow
,
scale
;
width
:
4rem
;
}
.button--hamburger:hover
{
background-color
:
#122036
;
border-radius
:
20%
;
cursor
:
pointer
;
}
.button--hamburger:active
{
box-shadow
:
inset -1px -1px 4px rgba(0, 0, 0, 0.6),
inset 1px 0px 4px rgba(0, 0, 0, 0.6),
#1C0B3D 0px 1px 1px;
}
.button--hamburger span
{
color
:
#80C24A
;
font-size
:
2rem
;
line-height
:
1.5
;
transition-duration
:
200ms
;
transition-property
:
translate
;
translate
:
0
;
width
:
100%
;
padding
:
0
;
}
.button--hamburger span:active
{
translate
:
0px 2.5px
;
}
<
/
style
>
menu