mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
41 lines
667 B
HTML
41 lines
667 B
HTML
<input type="checkbox" id="star">
|
|
<label for="star">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
|
|
</svg>
|
|
</label>
|
|
|
|
<style>
|
|
/* From Uiverse.io by ahmed150up - Tags: checkbox, star */
|
|
input[type="checkbox"] {
|
|
display: none;
|
|
}
|
|
|
|
label svg {
|
|
width: 44px;
|
|
height: 44px;
|
|
fill: none;
|
|
stroke: #000;
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
input[type="checkbox"]:checked + label svg {
|
|
fill: #FFC107;
|
|
animation: pop_42 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes pop_42 {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
</style>
|