mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
54 lines
1.5 KiB
HTML
54 lines
1.5 KiB
HTML
<div class="checkbox-wrapper-37">
|
|
<input id="terms-checkbox-37" name="checkbox" type="checkbox">
|
|
<label class="terms-label" for="terms-checkbox-37">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" class="checkbox-svg">
|
|
<mask fill="white" id="path-1-inside-1_476_5-37">
|
|
<rect height="200" width="200"></rect>
|
|
</mask>
|
|
<rect mask="url(#path-1-inside-1_476_5-37)" stroke-width="40" class="checkbox-box" height="200" width="200"></rect>
|
|
<path stroke-width="15" d="M52 111.018L76.9867 136L149 64" class="checkbox-tick"></path>
|
|
</svg>
|
|
<span class="label-text">Checkbox</span>
|
|
</label>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Shoh2008 - Tags: checkbox */
|
|
.checkbox-wrapper-37 input[type="checkbox"] {
|
|
display: none;
|
|
}
|
|
|
|
.checkbox-wrapper-37 .terms-label {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.checkbox-wrapper-37 .terms-label .label-text {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.checkbox-wrapper-37 .checkbox-svg {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.checkbox-wrapper-37 .checkbox-box {
|
|
fill: #fff;
|
|
stroke: #ff7a00;
|
|
stroke-dasharray: 800;
|
|
stroke-dashoffset: 800;
|
|
transition: stroke-dashoffset 0.6s ease-in;
|
|
}
|
|
|
|
.checkbox-wrapper-37 .checkbox-tick {
|
|
stroke: #ff7a00;
|
|
stroke-dasharray: 172;
|
|
stroke-dashoffset: 172;
|
|
transition: stroke-dashoffset 0.6s ease-in;
|
|
}
|
|
|
|
.checkbox-wrapper-37 input[type="checkbox"]:checked + .terms-label .checkbox-box,
|
|
.checkbox-wrapper-37 input[type="checkbox"]:checked + .terms-label .checkbox-tick {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
</style>
|