پیشنمایش زنده
کد HTML
<label
class="relative flex cursor-pointer items-center justify-center gap-[1em]"
for="star"
>
<input class="peer appearance-none" id="star" name="star" type="checkbox" />
<span
class="absolute left-0 top-1/2 h-[2em] w-[2em] -translate-x-full -translate-y-1/2 rounded-[0.25em] border-[1px] border-black"
>
</span>
<svg
class="absolute left-0 top-1/2 h-[2em] w-[2em] -translate-x-full -translate-y-1/2 duration-500 ease-out [stroke-dasharray:100] [stroke-dashoffset:100] peer-checked:[stroke-dashoffset:0]"
viewBox="0 0 38 37"
fill="none"
height="37"
width="38"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.617 36.785c-.676-5.093 4.49-10.776 6.318-14.952 1.887-4.31 4.315-10.701 6.055-15.506C20.343 2.59 20.456.693 20.57.789c3.262 2.744 1.697 10.518 2.106 14.675 1.926 19.575 4.62 12.875-7.635 4.43C12.194 17.933 2.911 12.1 1.351 8.82c-1.177-2.477 5.266 0 7.898 0 2.575 0 27.078-1.544 27.907-1.108.222.117-.312.422-.526.554-1.922 1.178-3.489 1.57-5.266 3.046-3.855 3.201-8.602 6.002-12.11 9.691-4.018 4.225-5.388 10.245-11.321 10.245"
stroke-width="1.5px"
pathLength="100"
stroke="#000"
></path>
</svg>
<p class="text-[1em] font-semibold [user-select:none]">Make the project</p>
</label>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.left-0 {
left: 0px;
}
.top-1\/2 {
top: 50%;
}
.flex {
display: flex;
}
.h-\[2em\] {
height: 2em;
}
.w-\[2em\] {
width: 2em;
}
.-translate-x-full {
--tw-translate-x: -100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
cursor: pointer;
}
.appearance-none {
-webkit-appearance: none;
appearance: none;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.gap-\[1em\] {
gap: 1em;
}
.rounded-\[0\.25em\] {
border-radius: 0.25em;
}
.border-\[1px\] {
border-width: 1px;
}
.border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.text-\[1em\] {
font-size: 1em;
}
.font-semibold {
font-weight: 600;
}
.duration-500 {
transition-duration: 500ms;
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\[stroke-dasharray\:100\] {
stroke-dasharray: 100;
}
.\[stroke-dashoffset\:100\] {
stroke-dashoffset: 100;
}
.\[user-select\:none\] {
-webkit-user-select: none;
user-select: none;
}
.peer:checked ~ .peer-checked\:\[stroke-dashoffset\:0\] {
stroke-dashoffset: 0;
}