پیشنمایش زنده
کد HTML
<div class="bookmark-checkbox">
<input
class="bookmark-checkbox__input"
id="bookmark-toggle"
type="checkbox"
/>
<label class="bookmark-checkbox__label" for="bookmark-toggle">
<svg viewBox="0 0 24 24" class="bookmark-checkbox__icon">
<defs>
<linearGradient y2="100%" x2="100%" y1="0%" x1="0%" id="gradientFill">
<stop style="stop-color:#ff5a5f;stop-opacity:1" offset="0%"></stop>
<stop style="stop-color:#ff9a44;stop-opacity:1" offset="100%"></stop>
</linearGradient>
</defs>
<path
fill="url(#gradientFill)"
d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"
class="bookmark-checkbox__icon-back"
></path>
<path d="M8 11l3 3 5-5" class="bookmark-checkbox__icon-check"></path>
</svg>
</label>
</div>
کد CSS
/* General styles */
.bookmark-checkbox {
display: inline-block;
position: relative;
}
.bookmark-checkbox__input {
display: none;
}
.bookmark-checkbox__label {
cursor: pointer;
display: inline-flex;
align-items: center;
}
.bookmark-checkbox__icon {
width: 2.5em; /* Increase size for better visibility */
height: 2.5em;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.3s, fill 0.3s;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); /* Add subtle shadow */
}
.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-back {
stroke: #ff5a5f;
transform: scale(1.1);
animation: bookmark-pop 0.4s ease;
fill: url(#gradientFill); /* Apply gradient fill */
}
.bookmark-checkbox__input:checked
+ .bookmark-checkbox__label
.bookmark-checkbox__icon-check {
stroke-dashoffset: 0;
transition-delay: 0.2s;
}
/* Add gradient fill using SVG */
.bookmark-checkbox__icon .gradient-fill {
background: linear-gradient(to right, #ff5a5f, #ff9a44);
-webkit-background-clip: text;
color: transparent;
transition: background 0.3s ease;
}
@keyframes bookmark-pop {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1.1);
}
}