Cleanup button styling common code

src/_button.scss

@@ -0,0 +1,21 @@
+@mixin button($color-bg, $color-text) {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	color: $color-text;
+	font-weight: 600;
+	text-decoration: none;
+	opacity: 0.8;
+	background-color: $color-bg;
+	padding: 0.5rem 1rem;
+	clip-path: var(--clip-path-button);
+	transition: all var(--animation-speed) var(--animation-type);
+	user-select: none;
+
+	:hover,
+	:focus-visible {
+		opacity: 1;
+		text-decoration-color: unset;
+	}
+}

src/lib/Button.svelte

@@ -13,29 +13,16 @@
 
 <style lang="scss">
 	@import '../vars';
+	@import '../button';
 
 	a,
 	button {
-		display: flex;
+		@include button($color-primary, $color-primary-text);
-		flex-direction: row;
-		align-items: center;
-		color: $color-primary-text;
-		font-weight: 600;
-		text-decoration: none;
-		opacity: 0.8;
-		background-color: $color-primary;
-		padding: 0.5rem 1rem;
-		clip-path: var(--clip-path-button);
-		transition: all var(--animation-speed) var(--animation-type);
-		user-select: none;
 	}
+
+	/* Disabled */
 	button {
 		opacity: 0.6;
 		cursor: unset;
 	}
-	a:hover,
-	a:focus-visible {
-		opacity: 1;
-		text-decoration-color: unset;
-	}
 </style>

src/routes/+page.svelte

@@ -87,6 +87,7 @@
 
 <style lang="scss">
 	@import '../vars';
+	@import '../button';
 
 	picture {
 		max-width: 320px;
@@ -108,23 +109,8 @@
 	}
 
 	.socials a {
-		display: flex;
+		@include button($color-secondary, $color-secondary-text);
-		align-items: center;
-		justify-content: center;
-		font-weight: 600;
-		gap: 0.5rem;
-		background-color: $color-secondary;
-		color: $color-secondary-text;
-		padding: 0.5rem 1rem;
 		min-width: 8rem;
-		clip-path: var(--clip-path-button);
-		opacity: 0.8;
-		transition: all var(--animation-speed) var(--animation-type);
-		user-select: none;
-		text-decoration: none;
-	}
-	.socials a:hover {
-		opacity: 1;
 	}
 
 	h1 {