Joururi/joururi-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added glow prop to button

Browse Source
This commit is contained in:
Alexis
2024-08-07 20:24:17 +02:00
parent 0e9d12c759
commit dc199d803f
2 changed files with 83 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/Button.astro
View File

@@ -1,12 +1,29 @@
<button class="relative py-2 px-6 bg-slate-900 rounded-[100vmax] text-sm">
---
interface Props {
glow?: boolean;
}
const { glow = false } = Astro.props;
---
<button
class="relative py-2 px-6 flex items-center gap-[0.5ch] rounded-[100vmax] text-sm bg-slate-900 hover:bg-slate-800 transition-colors"
class:list={
[
{
'glow': glow
}
]
}
>
<slot />
</button>
<style lang="scss">
:root {
--stop-1: #022c22;
--stop-2: #34d399;
--stop-3: #ecfdf5;
--glow-shade-1: #022c22;
--glow-shade-2: #34d399;
--glow-shade-3: #ecfdf5;
}
@property --gradient-angle {
@@ -15,46 +32,48 @@
inherits: false;
}
button::before,
button::after {
content: "";
position: absolute;
inset: -1px;
z-index: -1;
background: conic-gradient(
from var(--gradient-angle),
var(--stop-1),
var(--stop-1),
var(--stop-1),
var(--stop-1),
var(--stop-1),
var(--stop-1),
var(--stop-1),
var(--stop-2),
var(--stop-3),
var(--stop-2),
var(--stop-1),
var(--stop-1),
var(--stop-1),
var(--stop-1),
var(--stop-1),
var(--stop-1),
var(--stop-1)
);
border-radius: inherit;
animation: rotation 4.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
button::after {
filter: blur(3.5rem);
}
@keyframes rotation {
0% {
--gradient-angle: -180deg;
button.glow {
&::before,
&::after {
content: "";
position: absolute;
inset: -1px;
z-index: -1;
background: conic-gradient(
from var(--gradient-angle),
var(--glow-shade-1),
var(--glow-shade-1),
var(--glow-shade-1),
var(--glow-shade-1),
var(--glow-shade-1),
var(--glow-shade-1),
var(--glow-shade-1),
var(--glow-shade-2),
var(--glow-shade-3),
var(--glow-shade-2),
var(--glow-shade-1),
var(--glow-shade-1),
var(--glow-shade-1),
var(--glow-shade-1),
var(--glow-shade-1),
var(--glow-shade-1),
var(--glow-shade-1)
);
border-radius: inherit;
animation: glow-rotation 4.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
100% {
--gradient-angle: 180deg;
&::after {
filter: blur(3.5rem);
}
@keyframes glow-rotation {
0% {
--gradient-angle: -180deg;
}
100% {
--gradient-angle: 180deg;
}
}
}
</style>