mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
66 lines
1.1 KiB
HTML
66 lines
1.1 KiB
HTML
<label class="bar" for="check">
|
|
<input type="checkbox" id="check">
|
|
|
|
<span class="top"></span>
|
|
<span class="middle"></span>
|
|
<span class="bottom"></span>
|
|
</label>
|
|
<style>
|
|
/* From Uiverse.io by Ali-Tahmazi99 - Tags: hamburger */
|
|
input[type = "checkbox"] {
|
|
-webkit-appearance: none;
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.bar {
|
|
display: block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
width: 50px;
|
|
height: 40px;
|
|
}
|
|
|
|
.bar span {
|
|
position: absolute;
|
|
width: 45px;
|
|
height: 7px;
|
|
background: #f1faee;
|
|
border-radius: 100px;
|
|
display: inline-block;
|
|
transition: 0.3s ease;
|
|
left: 0;
|
|
}
|
|
|
|
.bar span.top {
|
|
top: 0;
|
|
}
|
|
|
|
.bar span.middle {
|
|
top: 17px;
|
|
}
|
|
|
|
.bar span.bottom {
|
|
bottom: 0;
|
|
}
|
|
|
|
input[type]:checked ~ span.top {
|
|
transform: rotate(45deg);
|
|
transform-origin: top left;
|
|
width: 48px;
|
|
left: 5px;
|
|
}
|
|
|
|
input[type]:checked ~ span.bottom {
|
|
transform: rotate(-45deg);
|
|
transform-origin: top left;
|
|
width: 48px;
|
|
bottom: -1px;
|
|
box-shadow: 0 0 10px #495057;
|
|
}
|
|
|
|
input[type]:checked ~ span.middle {
|
|
transform: translateX(-20px);
|
|
opacity: 0;
|
|
}
|
|
</style>
|