mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
89 lines
No EOL
1.8 KiB
HTML
89 lines
No EOL
1.8 KiB
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>
|
|
|
|
<style>
|
|
/* From Uiverse.io by LeonKohli - Tags: icon, animation, active, checkbox, glow, svg, cool checkbox */
|
|
.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);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|