mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
65 lines
1.3 KiB
HTML
65 lines
1.3 KiB
HTML
<label class="buttons__burger" for="burger">
|
|
<input type="checkbox" id="burger">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</label>
|
|
|
|
<style>
|
|
/* From Uiverse.io by tarantino421 - Tags: switch, hamburger, arrow, burger, switch menu */
|
|
.buttons__burger {
|
|
--size: 3rem;
|
|
--clr: #000;
|
|
width: var(--size);
|
|
height: calc(0.7 * var(--size));
|
|
cursor: pointer;
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.buttons__burger #burger {
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.buttons__burger span {
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
border-radius: 0.5rem;
|
|
border: 3px solid var(--clr);
|
|
background-color: var(--clr);
|
|
transition: 0.15s ease-in-out;
|
|
}
|
|
|
|
.buttons__burger span:nth-of-type(1) {
|
|
top: 0;
|
|
right: 0;
|
|
transform-origin: right center;
|
|
}
|
|
|
|
.buttons__burger span:nth-of-type(2) {
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.buttons__burger span:nth-of-type(3) {
|
|
top: 100%;
|
|
right: 0;
|
|
transform-origin: right center;
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
.buttons__burger #burger:checked ~ span:nth-of-type(1) {
|
|
transform: translateY(-30%) rotate(40deg);
|
|
width: 50%;
|
|
top: 50%;
|
|
}
|
|
|
|
.buttons__burger #burger:checked ~ span:nth-of-type(3) {
|
|
transform: translateY(-70%) rotate(-40deg);
|
|
width: 50%;
|
|
top: 50%;
|
|
}
|
|
</style>
|