mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
82 lines
1.7 KiB
HTML
82 lines
1.7 KiB
HTML
<div class="container">
|
|
<input type="checkbox" id="cbx2" style="display: none;">
|
|
<label for="cbx2" class="check">
|
|
<svg width="18px" height="18px" viewBox="0 0 18 18">
|
|
<path d="M 1 9 L 1 9 c 0 -5 3 -8 8 -8 L 9 1 C 14 1 17 5 17 9 L 17 9 c 0 4 -4 8 -8 8 L 9 17 C 5 17 1 14 1 9 L 1 9 Z"></path>
|
|
<polyline points="1 9 7 14 15 4"></polyline>
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by WhiteNervosa - Tags: checkbox, radio */
|
|
/* Variation of work by @mrhyddenn for Radios */
|
|
|
|
|
|
.check {
|
|
cursor: pointer;
|
|
position: relative;
|
|
margin: auto;
|
|
width: 18px;
|
|
height: 18px;
|
|
-webkit-tap-highlight-color: transparent;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.check:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -15px;
|
|
left: -15px;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: rgba(34, 50, 84, 0.03);
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.check svg {
|
|
position: relative;
|
|
z-index: 1;
|
|
fill: none;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke: #c8ccd4;
|
|
stroke-width: 1.5;
|
|
transform: translate3d(0, 0, 0);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.check svg path {
|
|
stroke-dasharray: 60;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
|
|
.check svg polyline {
|
|
stroke-dasharray: 22;
|
|
stroke-dashoffset: 66;
|
|
}
|
|
|
|
.check:hover:before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.check:hover svg {
|
|
stroke: var(--accent-color, #a3e583);
|
|
}
|
|
|
|
#cbx2:checked + .check svg {
|
|
stroke: var(--accent-color, #a3e583);
|
|
}
|
|
|
|
#cbx2:checked + .check svg path {
|
|
stroke-dashoffset: 60;
|
|
transition: all 0.3s linear;
|
|
}
|
|
|
|
#cbx2:checked + .check svg polyline {
|
|
stroke-dashoffset: 42;
|
|
transition: all 0.2s linear;
|
|
transition-delay: 0.15s;
|
|
}
|
|
</style>
|