Cutlery/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-09-29 15:30:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

style: add shine to donation button

Browse Source
This commit is contained in:
MAZE 2024-02-07 21:46:26 +03:30
parent 5916e86d3c
commit ac24da2940
1 changed files with 55 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/categories/donate/donate.module.css
View File

@ -41,6 +41,7 @@
.button { .button {
position: relative; position: relative;
z-index: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -48,18 +49,69 @@
height: 40px; height: 40px;
padding: 0 20px; padding: 0 20px;
margin: 16px auto 0; margin: 16px auto 0;
overflow: hidden;
font-size: var(--font-xsm); font-size: var(--font-xsm);
font-weight: 500; font-weight: 500;
color: var(--color-neutral-subtle); color: var(--color-neutral-subtle);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
background-color: var(--color-neutral-50); background-color: var(--color-neutral-200);
border: 1px solid var(--color-neutral-200); border: none;
border-radius: 50px; border-radius: 50px;
transition: 0.2s; transition: 0.2s;
&:hover { &::after {
position: absolute;
top: 1px;
left: 1px;
z-index: -1;
width: calc(100% - 2px);
height: calc(100% - 2px);
content: '';
background-color: var(--color-neutral-50);
border-radius: 100px;
transition: inherit;
}
&::before {
position: absolute;
top: 50%;
left: 50%;
z-index: -2;
width: 150%;
aspect-ratio: 1 / 1;
content: '';
background-image: conic-gradient(
transparent,
transparent,
var(--color-neutral-500),
transparent,
transparent,
transparent,
transparent,
var(--color-neutral-500),
transparent,
transparent
);
transform: translate(-50%, -50%);
animation-name: shine;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
&:hover::after {
background-color: var(--color-neutral-100); background-color: var(--color-neutral-100);
} }
} }
} }
@keyframes shine {
0% {
transform: translate(-50%, -50%) rotate(90deg);
}
100% {
transform: translate(-50%, -50%) rotate(450deg);
}
}