PR/9

src/components/Boton.vue

@@ -0,0 +1,28 @@
+<template>
+  <button
+    class="checkbox-class"
+    :class="{ 'scaled': isHovered }"
+    @mouseover="isHovered = true"
+    @mouseout="isHovered = false">
+    <slot />
+  </button>
+</template>
+
+<script setup lang = 'ts'>
+import { ref } from 'vue';
+
+const isHovered = ref(true);
+</script>
+
+<style scoped>
+  .scaled {
+    cursor: pointer;
+    transform: scale(0.9);
+    transition: transform 0.3s ease;
+  }
+
+ .checkbox-class {
+  background-color: var(--o-color-theme);
+  color: #aacfff;
+  }
+</style>

src/pages/pruebaBoton.vue

@@ -0,0 +1,8 @@
+<template>
+  <slot />
+  <Boton />
+</template>
+
+<script setup lang="ts">
+</script>
+

types/global/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BaseInput: typeof import('./../../src/components/BaseInput.vue')['default']
+    Boton: typeof import('./../../src/components/Boton.vue')['default']
     Pin: typeof import('./../../src/components/Pin.vue')['default']
     RouterLink: typeof import('vue-router/auto')['RouterLink']
     RouterView: typeof import('vue-router/auto')['RouterView']

types/global/routes.d.ts

@@ -22,5 +22,6 @@ declare module 'vue-router/auto-routes' {
     '/login/': RouteRecordInfo<'/login/', '/login', Record<never, never>, Record<never, never>>,
     '/pinPrueba': RouteRecordInfo<'/pinPrueba', '/pinPrueba', Record<never, never>, Record<never, never>>,
     '/prueba': RouteRecordInfo<'/prueba', '/prueba', Record<never, never>, Record<never, never>>,
+    '/pruebaBoton': RouteRecordInfo<'/pruebaBoton', '/pruebaBoton', Record<never, never>, Record<never, never>>,
   }
 }