ADD: optimize css

components/Button.vue

@@ -0,0 +1,50 @@
+<template>
+  <component :is="type" v-bind="actualProps()" class="Button">
+    {{ label }}
+  </component>
+</template>
+
+<script setup lang="ts">
+
+type Props = {
+  type ?: 'a' | 'button'
+  href ?: string
+  label : string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type : 'a'
+})
+
+const actualProps = () => {
+  if (props.type === 'a') {
+    return {
+      href: props.href,
+      target: props.href!.startsWith('https://') ? '_blank' : undefined,
+    }
+  }
+}
+</script>
+
+<style>
+.Button {
+  all: unset;
+  transition: 250ms;
+  background: var(--color-orange);
+  color: var(--color-black);
+  cursor: pointer;
+  padding: 1rem 1.5rem;
+  outline: 3px solid var(--color-black);
+  box-shadow: 0 0 0 0 var(--color-orange);
+  border-radius: 99999px;
+  text-align: center;
+
+  &:hover {
+    box-shadow: 0 0 0 6px var(--color-orange);
+  }
+
+  &.cta {
+    font-size: clamp(1rem, 2vw, 1.5rem);
+  }
+}
+</style>