feat: style button

src/lib/components/button.svelte

@@ -1,32 +1,32 @@
 <script lang="ts">
 </script>
 
-<button> Eintreten </button>
+<button>
+	<slot />
+</button>
 
 <style>
 	button {
 		position: relative;
-		padding: 0.7em;
-		background: black;
-		border-radius: 0.4em;
 		cursor: pointer;
-		border: none;
 		font-family: 'Meow Script', cursive;
 		font-size: 2em;
 		color: #ceba51;
+		background: transparent;
+		filter: drop-shadow(0px 0px 30px #886d2c);
+		/*** Your CSS code ***/
+		border-style: solid;
+		border-width: 30px;
+		border-image: url(border.png);
+		border-image-repeat: stretch;
+		border-image-slice: 24% 23%;
+		transition: border-image-slice 0.3s ease, filter 0.3s ease;
+		will-change: contents;
+		transform: translateZ(0);
 	}
 
-	button::after {
+	button:hover {
-		content: '';
+		filter: drop-shadow(0px 0px 20px #886d2c);
-		z-index: -1;
+		border-image-slice: 24% 23%;
-		--border: 2px;
-		background: linear-gradient(-45deg, #d9c555, #7a5423);
-		border-radius: 13px;
-		position: absolute;
-		width: calc(100% + calc(var(--border) * 2));
-		height: calc(100% + calc(var(--border) * 2));
-		top: calc(var(--border) * -1);
-		left: calc(var(--border) * -1);
-		box-shadow: 0px 0px 40px #c49c684f;
 	}
 </style>