gradient btn POC

.prettierignore

@@ -11,3 +11,4 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+*.scss

src/lib/UI/GradientButton.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	let className = '';
+	export { className as class };
+</script>
+
+<button class="btn border-gradient {className}">
+	<span class="border-gradient-s1" />
+	<span class="border-gradient-s2" />
+	<span class="text">
+		<slot />
+	</span>
+</button>
+
+<style lang="scss">
+	.btn {
+		display: flex;
+		padding: 0.5625rem 0.875rem;
+		align-items: center;
+
+		color: #e8e9f0;
+		font-size: 1rem;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 1.375rem;
+		letter-spacing: -0.0045rem;
+
+		background: rgba(253, 54, 110, 0.04);
+		box-shadow: 0px -6px 10px 0px rgba(253, 54, 110, 0.12) inset;
+
+		border-radius: 0.5rem;
+
+		/* Border gradient vars   */
+		--border-radius: 0.5rem;
+		--border-size: 0.0625rem;
+	}
+
+	/* Easy class */
+	.border-gradient {
+		position: relative;
+	}
+
+	[class^='border-gradient'] {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		border-radius: var(--border-radius);
+		border: var(--border-size) solid transparent;
+		background: var(--border-gradient) border-box;
+		-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+		-webkit-mask-composite: destination-out;
+		mask-composite: exclude;
+		pointer-events: none;
+	}
+
+	.border-gradient-s1 {
+		--border-gradient: linear-gradient(
+			to bottom,
+			rgba(253, 54, 110, 0.48) 0%,
+			rgba(253, 54, 110, 0) 180%
+		);
+	}
+
+	.border-gradient-s2 {
+		--border-gradient: radial-gradient(
+			42.86% 42.86% at 50.55% -0%,
+			rgba(255, 255, 255, 0.2) 0%,
+			rgba(255, 255, 255, 0) 100%
+		);
+	}
+</style>

src/lib/layouts/Homepage.svelte

@@ -1,3 +1,7 @@
+<script>
+	import GradientButton from '$lib/UI/GradientButton.svelte';
+</script>
+
 <div id="app" class="u-position-relative">
 	<section class="aw-mobile-header is-transparent theme-dark">
 		<div class="aw-mobile-header-start">
@@ -95,9 +99,7 @@
 								<span class="text">Star on GitHub</span>
 								<span class="aw-inline-tag aw-sub-body-400">99.9k</span>
 							</button>
-							<button class="aw-button is-secondary">
-								<span class="text">Sign Up</span>
-							</button>
+							<GradientButton>Sign Up</GradientButton>
 							<button class="aw-button">
 								<span class="text">Get Started</span>
 							</button>

src/scss/6-elements/_button.scss

@@ -28,6 +28,7 @@
     border-color:hsl(var(--aw-color-primary-500));
     box-shadow: 0px -6px 10px 0px rgba(253, 54, 110, 0.08) inset;
     color: hsl(var(--aw-color-primary-500));
+    
     .#{$p}-inline-tag {
       background:rgba(255, 64, 120, 0.10);
       color:hsl(var(--aw-color-primary-500));