add new button type

2026-09-26 10:10:30 +02:00
parent 9d3a4d1044
commit 53c2fc14f5
5 changed files with 53 additions and 8 deletions
@@ -0,0 +1,48 @@
+<script setup>
+import {ref, Transition} from 'vue';
+
+const hover = ref(false);
+</script>
+
+<template>
+    <div class="flex-container">
+        <Transition>
+            <img :src="'/skonk/main_menu_pointer.png'" class="cursor" v-if="hover">
+        </Transition>
+        <button @click="$emit('click')" @mouseover="hover = true" @mouseleave="hover = false">
+            <slot>
+
+            </slot>
+        </button>
+        <Transition>
+            <img :src="'/skonk/main_menu_pointer.png'" class="cursor flipped" v-if="hover">
+        </Transition>
+    </div>
+</template>
+
+<style scoped>
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+.flex-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
+button {
+    font-size: 3.5vh;
+}
+.cursor {
+    height: 30px;
+}
+.flipped {
+    rotate: 180deg;
+}
+</style>