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

71
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,41 +32,42 @@
inherits: false;
}
button::before,
button::after {
button.glow {
&::before,
&::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)
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: rotation 4.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
animation: glow-rotation 4.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
button::after {
&::after {
filter: blur(3.5rem);
}
@keyframes rotation {
@keyframes glow-rotation {
0% {
--gradient-angle: -180deg;
}
@@ -57,4 +75,5 @@ button::after {
--gradient-angle: 180deg;
}
}
}
</style>

33
src/pages/index.astro
View File

@@ -15,18 +15,34 @@ import Layout from '../layouts/Layout.astro';
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam sint placeat dolores nemo asperiores minus, quam commodi cum?</p>
<div>
<div class="flex items-center justify-center gap-2">
<Button glow>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" viewBox="0 0 256 256">
<path d="M208.31,75.68A59.78,59.78,0,0,0,202.93,28,8,8,0,0,0,196,24a59.75,59.75,0,0,0-48,24H124A59.75,59.75,0,0,0,76,24a8,8,0,0,0-6.93,4,59.78,59.78,0,0,0-5.38,47.68A58.14,58.14,0,0,0,56,104v8a56.06,56.06,0,0,0,48.44,55.47A39.8,39.8,0,0,0,96,192v8H72a24,24,0,0,1-24-24A40,40,0,0,0,8,136a8,8,0,0,0,0,16,24,24,0,0,1,24,24,40,40,0,0,0,40,40H96v16a8,8,0,0,0,16,0V192a24,24,0,0,1,48,0v40a8,8,0,0,0,16,0V192a39.8,39.8,0,0,0-8.44-24.53A56.06,56.06,0,0,0,216,112v-8A58.14,58.14,0,0,0,208.31,75.68ZM200,112a40,40,0,0,1-40,40H112a40,40,0,0,1-40-40v-8a41.74,41.74,0,0,1,6.9-22.48A8,8,0,0,0,80,73.83a43.81,43.81,0,0,1,.79-33.58,43.88,43.88,0,0,1,32.32,20.06A8,8,0,0,0,119.82,64h32.35a8,8,0,0,0,6.74-3.69,43.87,43.87,0,0,1,32.32-20.06A43.81,43.81,0,0,1,192,73.83a8.09,8.09,0,0,0,1,7.65A41.72,41.72,0,0,1,200,104Z" />
</svg>
<span>
Github
</span>
</Button>
<Button>
Test
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" viewBox="0 0 256 256">
<path d="M132,24A100.11,100.11,0,0,0,32,124v84a16,16,0,0,0,16,16h84a100,100,0,0,0,0-200Zm0,184H48V124a84,84,0,1,1,84,84Zm12-80a12,12,0,1,1-12-12A12,12,0,0,1,144,128Zm-44,0a12,12,0,1,1-12-12A12,12,0,0,1,100,128Zm88,0a12,12,0,1,1-12-12A12,12,0,0,1,188,128Z" />
</svg>
<span>
Contact
</span>
</Button>
</div>
</div>
</div>
<div class="absolute inset-0 -z-30 isolate">
<div id="shape-filter"></div>
<div id="shape" class="bg-gradient-to-tr from-emerald-500 from-35% via-indigo-500 via-70% to-fuchsia-500 to-100% opacity-20 contrast-more:opacity-15"></div>
<div id="spotlight" class="bg-gradient-to-tr from-lime-500 from-35% via-green-500 via-70% to-emerald-500 to-100% opacity-40 contrast-more:opacity-25"></div>
<div id="shape-filter" class="h-full w-full relative z-10"></div>
<div id="shape" class="rounded-full aspect-square bg-gradient-to-tr from-emerald-500 from-35% via-indigo-500 via-70% to-fuchsia-500 to-100% opacity-20 contrast-more:opacity-15 will-change-transform"></div>
<div id="spotlight" class="rounded-full aspect-square bg-gradient-to-tr from-lime-500 from-35% via-green-500 via-70% to-emerald-500 to-100% opacity-40 contrast-more:opacity-25 will-change-transform"></div>
</div>
<div
@@ -110,10 +126,6 @@ document.addEventListener('mousemove', throttle((event) => {
}
#shape-filter {
height: 100%;
width: 100%;
position: absolute;
z-index: 2;
backdrop-filter: blur(10vmax);
}
@@ -124,9 +136,6 @@ document.addEventListener('mousemove', throttle((event) => {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;
aspect-ratio: 1;
animation: shape-spin 13s infinite;
will-change: transform, scroll-position;
}
</style>