پیشنمایش زنده
کد HTML
<div class="bookmark-checkbox">
<input
type="checkbox"
id="bookmark-toggle"
class="bookmark-checkbox__input"
/>
<label for="bookmark-toggle" class="bookmark-checkbox__label">
<svg class="bookmark-checkbox__icon" viewBox="0 0 24 24">
<path
class="bookmark-checkbox__icon-back"
d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"
></path>
<path class="bookmark-checkbox__icon-check" d="M8 11l3 3 5-5"></path>
</svg>
</label>
</div>
کد CSS
.bookmark-checkbox {
display: inline-block;
}
.bookmark-checkbox__input {
display: none;
}
.bookmark-checkbox__label {
cursor: pointer;
}
.bookmark-checkbox__icon {
width: 2em;
height: 2em;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.3s, fill 0.3s;
}
.bookmark-checkbox__icon-back {
stroke: #333;
transition: transform 0.3s;
}
.bookmark-checkbox__icon-check {
stroke: #fff;
stroke-dasharray: 16;
stroke-dashoffset: 16;
transition: stroke-dashoffset 0.3s, transform 0.3s;
transform: translateX(2px);
}
.bookmark-checkbox__input:checked
+ .bookmark-checkbox__label
.bookmark-checkbox__icon {
fill: #ff5a5f;
}
.bookmark-checkbox__input:checked
+ .bookmark-checkbox__label
.bookmark-checkbox__icon-back {
stroke: #ff5a5f;
transform: scale(1.1);
animation: bookmark-pop 0.4s ease;
}
.bookmark-checkbox__input:checked
+ .bookmark-checkbox__label
.bookmark-checkbox__icon-check {
stroke-dashoffset: 0;
transition-delay: 0.2s;
}
@keyframes bookmark-pop {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1.1);
}
}