mirror of
https://github.com/remvze/moodist.git
synced 2025-09-29 15:30:49 -04:00
feat: add special button
This commit is contained in:
MAZE
parent
81e6666776
commit
a514a364ec
@ -40,78 +40,6 @@
|
||||
}
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: max-content;
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
margin: 16px auto 0;
|
||||
overflow: hidden;
|
||||
font-size: var(--font-xsm);
|
||||
font-weight: 500;
|
||||
color: var(--color-neutral-subtle);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
background-color: var(--color-neutral-200);
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
transition: 0.2s;
|
||||
|
||||
&::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-400),
|
||||
transparent,
|
||||
transparent,
|
||||
transparent,
|
||||
transparent,
|
||||
var(--color-neutral-400),
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(90deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(450deg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { FaCoffee } from 'react-icons/fa/index';
|
||||
|
||||
import { SpecialButton } from '@/components/special-button';
|
||||
|
||||
import styles from './donate.module.css';
|
||||
|
||||
export function Donate() {
|
||||
@ -14,14 +16,12 @@ export function Donate() {
|
||||
|
||||
<h2 className={styles.title}>Support Me</h2>
|
||||
<p className={styles.desc}>Help me keep Moodist ad-free.</p>
|
||||
<a
|
||||
<SpecialButton
|
||||
className={styles.button}
|
||||
href="https://buymeacoffee.com/remvze"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Donate Today
|
||||
</a>
|
||||
</SpecialButton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -63,78 +63,6 @@
|
||||
}
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: max-content;
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
margin: 16px auto 0;
|
||||
overflow: hidden;
|
||||
font-size: var(--font-xsm);
|
||||
font-weight: 500;
|
||||
color: var(--color-neutral-subtle);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
background-color: var(--color-neutral-200);
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
transition: 0.2s;
|
||||
|
||||
&::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-400),
|
||||
transparent,
|
||||
transparent,
|
||||
transparent,
|
||||
transparent,
|
||||
var(--color-neutral-400),
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(90deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(450deg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import { FaGithub } from 'react-icons/fa/index';
|
||||
|
||||
import { Container } from '@/components/container';
|
||||
import { SpecialButton } from '@/components/special-button';
|
||||
|
||||
import styles from './source.module.css';
|
||||
import { Container } from '../container';
|
||||
|
||||
export function Source() {
|
||||
return (
|
||||
@ -17,14 +19,12 @@ export function Source() {
|
||||
|
||||
<h2 className={styles.title}>Open Source</h2>
|
||||
<p className={styles.desc}>Moodist is free and open-source!</p>
|
||||
<a
|
||||
<SpecialButton
|
||||
className={styles.button}
|
||||
href="https://github.com/remvze/moodist"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Source Code
|
||||
</a>
|
||||
</SpecialButton>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
1
src/components/special-button/index.ts
Normal file
1
src/components/special-button/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { SpecialButton } from './special-button';
|
||||
74
src/components/special-button/special-button.module.css
Normal file
74
src/components/special-button/special-button.module.css
Normal file
@ -0,0 +1,74 @@
|
||||
.button {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: max-content;
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
overflow: hidden;
|
||||
font-size: var(--font-xsm);
|
||||
font-weight: 500;
|
||||
color: var(--color-neutral-subtle);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
background-color: var(--color-neutral-200);
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
transition: 0.2s;
|
||||
|
||||
&::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-400),
|
||||
transparent,
|
||||
transparent,
|
||||
transparent,
|
||||
transparent,
|
||||
var(--color-neutral-400),
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(90deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(450deg);
|
||||
}
|
||||
}
|
||||
26
src/components/special-button/special-button.tsx
Normal file
26
src/components/special-button/special-button.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { cn } from '@/helpers/styles';
|
||||
|
||||
import styles from './special-button.module.css';
|
||||
|
||||
interface SpecialButtonProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
export function SpecialButton({
|
||||
children,
|
||||
className,
|
||||
href,
|
||||
}: SpecialButtonProps) {
|
||||
return (
|
||||
<a
|
||||
className={cn(styles.button, className)}
|
||||
href={href}
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user