mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
102 lines
No EOL
2.9 KiB
HTML
102 lines
No EOL
2.9 KiB
HTML
<button class="action_has has_liked" aria-label="like" type="button">
|
|
<span data-icon=""
|
|
><svg
|
|
data-icon="aoeri"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
stroke-width="2"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="m8.05,11.99c0-.84.28-1.07,1.2-1.25,1.6-.31,2.35-.74,3.14-1.54,1.19-1.21,1.58-1.97,2.18-3.24.66-1.69,1.55-2.82,3.04-2.76.9.03,2.33.8,1.67,2.72-.31.9-1.98,3.61-2.23,4.23-.18.46.4.8.8.8h2.5c1.2,0,2.2,1,2.2,2.2l-1.1,5.6c-.3,1.5-1.02,2.23-2.2,2.2h-7.6c-2,0-3.6-1.6-3.6-3.6v-5.35Z"
|
|
data-d="thumb"
|
|
></path>
|
|
<path
|
|
d="m5.4,19.9c0,.6-.5,1.1-1.1,1.1h-1c-1,0-1.9-.9-1.9-1.9v-6.3c0-1,.9-1.9,1.9-1.9h.9c.7,0,1.2.6,1.2,1.2v7.7Z"
|
|
data-d="sleeves"
|
|
></path></svg
|
|
></span>
|
|
</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by ilkhoeri - Tags: simple, success, button, like, click */
|
|
.action_has {
|
|
--color: 0 0% 60%;
|
|
--color-has: 211deg 100% 48%;
|
|
--sz: 1rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: calc(var(--sz) * 2.5);
|
|
width: calc(var(--sz) * 2.5);
|
|
padding: 0.4rem 0.5rem;
|
|
border-radius: 0.375rem;
|
|
border: 0.0625rem solid hsl(var(--color));
|
|
}
|
|
|
|
.has_liked svg,
|
|
.has_saved svg {
|
|
overflow: visible;
|
|
height: calc(var(--sz) * 1.75);
|
|
width: calc(var(--sz) * 1.75);
|
|
--ease: cubic-bezier(0.5, 0, 0.25, 1);
|
|
--zoom-from: 1.75;
|
|
--zoom-via: 0.75;
|
|
--zoom-to: 1;
|
|
--duration: 1s;
|
|
}
|
|
|
|
.has_liked:hover {
|
|
transition: border-color var(--duration) var(--ease);
|
|
border-color: hsl(var(--color-has));
|
|
}
|
|
|
|
.has_liked:hover svg,
|
|
.has_saved:hover svg {
|
|
fill: hsl(var(--color-has) / 0.5);
|
|
color: hsl(var(--color-has));
|
|
}
|
|
|
|
.has_liked:hover [data-d="thumb"] {
|
|
animation: has-liked-thumb var(--duration) var(--ease) forwards;
|
|
}
|
|
.has_liked:hover [data-d="sleeves"] {
|
|
animation: has-liked-sleeves var(--duration) var(--ease) forwards;
|
|
}
|
|
|
|
@keyframes has-liked-thumb {
|
|
33.333% {
|
|
transform: rotate(-20deg) translate(1px, 2px) scale(var(--zoom-from));
|
|
}
|
|
66.666% {
|
|
transform: rotate(20deg) translate(2px, -2px) scale(var(--zoom-via));
|
|
d: path(
|
|
"m8.05,11.99c0-.84.28-1.07,1.2-1.25,1.6-.31,2.3-.64,2.9-1.09,0,0,1.64-1.31,2.21-3.11,1.12-3.59,2.11-4.85,3.72-4.85,2.27,0,2.96,2.22,2.55,3.54-.6,1.97-3.81,4.09-3.94,4.99-.07.49.76.72,1.16.72h2.5c1.2,0,2.2,1,2.2,2.2l-1.1,5.6c-.3,1.5-1.02,2.23-2.2,2.2h-7.6c-2,0-3.6-1.6-3.6-3.6v-5.35Z"
|
|
);
|
|
}
|
|
99.999% {
|
|
transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to));
|
|
}
|
|
}
|
|
|
|
@keyframes has-liked-sleeves {
|
|
33.333% {
|
|
transform: rotate(10deg) translate(6px, -2px) scale(var(--zoom-from));
|
|
}
|
|
66.666% {
|
|
transform: rotate(-10deg) translate(-6px, 0px) scale(var(--zoom-via));
|
|
}
|
|
99.999% {
|
|
transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to));
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|