پیشنمایش زنده
کد HTML
<div class="checkbox-wrapper-37">
<input type="checkbox" name="checkbox" id="terms-checkbox-37" />
<label for="terms-checkbox-37" class="terms-label">
<svg
class="checkbox-svg"
viewBox="0 0 200 200"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask id="path-1-inside-1_476_5-37" fill="white">
<rect width="200" height="200"></rect>
</mask>
<rect
width="200"
height="200"
class="checkbox-box"
stroke-width="40"
mask="url(#path-1-inside-1_476_5-37)"
></rect>
<path
class="checkbox-tick"
d="M52 111.018L76.9867 136L149 64"
stroke-width="15"
></path>
</svg>
<span class="label-text">Checkbox</span>
</label>
</div>
کد CSS
.checkbox-wrapper-37 input[type="checkbox"] {
display: none;
}
.checkbox-wrapper-37 .terms-label {
cursor: pointer;
display: flex;
align-items: center;
color: white;
}
.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;
}