mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
79 lines
1.5 KiB
HTML
79 lines
1.5 KiB
HTML
<label class="container">
|
|
<input type="checkbox" checked="checked">
|
|
<div class="checkmark">
|
|
<svg fill="none" viewBox="0 0 24 24">
|
|
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.3" stroke="#FFFFFF" d="M8 10V20M8 10L4 9.99998V20L8 20M8 10L13.1956 3.93847C13.6886 3.3633 14.4642 3.11604 15.1992 3.29977L15.2467 3.31166C16.5885 3.64711 17.1929 5.21057 16.4258 6.36135L14 9.99998H18.5604C19.8225 9.99998 20.7691 11.1546 20.5216 12.3922L19.3216 18.3922C19.1346 19.3271 18.3138 20 17.3604 20L8 20"></path>
|
|
</svg>
|
|
</div>
|
|
</label>
|
|
<style>
|
|
/* From Uiverse.io by KSAplay - Tags: checkbox, thumb, like */
|
|
.container input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.container {
|
|
display: block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
font-size: 25px;
|
|
user-select: none;
|
|
transition: 100ms;
|
|
}
|
|
|
|
.checkmark {
|
|
top: 0;
|
|
left: 0;
|
|
height: 2em;
|
|
width: 2em;
|
|
transition: 100ms;
|
|
animation: dislike_401 400ms ease;
|
|
}
|
|
|
|
.container input:checked ~ .checkmark path {
|
|
fill: #1C7DFF;
|
|
stroke-width: 1.2;
|
|
stroke: #212121;
|
|
/*same background color*/
|
|
}
|
|
|
|
.container input:checked ~ .checkmark {
|
|
animation: like_401 400ms ease;
|
|
}
|
|
|
|
.container:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
@keyframes like_401 {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes dislike_401 {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style>
|