aaaaa

src/lib/components/RetroButton.svelte

@@ -0,0 +1,85 @@
+<script>
+  export let href = '';
+  export let type = 'button';
+  export let variant = 'primary';
+  export let disabled = false;
+</script>
+
+{#if href}
+  <a href={href} class="retro-button {variant}" class:disabled>
+    <span class="button-text"><slot /></span>
+    <span class="button-border"></span>
+  </a>
+{:else}
+  <button type={type} class="retro-button {variant}" class:disabled {disabled}>
+    <span class="button-text"><slot /></span>
+    <span class="button-border"></span>
+  </button>
+{/if}
+
+<style>
+  .retro-button {
+    position: relative;
+    display: inline-block;
+    padding: 12px 24px;
+    background: #000;
+    color: #33ff00;
+    border: none;
+    font-family: 'Courier New', monospace;
+    font-size: 16px;
+    text-transform: uppercase;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .button-text {
+    position: relative;
+    z-index: 2;
+  }
+
+  .button-border {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    right: -4px;
+    bottom: -4px;
+    border: 2px solid #33ff00;
+    z-index: 1;
+    transition: all 0.3s ease;
+  }
+
+  .retro-button:hover .button-border {
+    top: -2px;
+    left: -2px;
+    right: 2px;
+    bottom: 2px;
+  }
+
+  .retro-button:active .button-border {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .retro-button.secondary {
+    color: #ff00ff;
+  }
+
+  .retro-button.secondary .button-border {
+    border-color: #ff00ff;
+  }
+
+  .retro-button.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .retro-button.disabled:hover .button-border {
+    top: 4px;
+    left: 4px;
+    right: -4px;
+    bottom: -4px;
+  }
+</style>