Button changed

assets/custom.css

@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+    .newButton{
+        background:
+            linear-gradient(black, black) padding-box ,
+            linear-gradient(to right, #dc2626, #be185d) border-box;
+        @apply border-solid border-transparent border-[2.5px] px-4 py-2  
+    }
+    .newButton:hover{
+        background:
+            linear-gradient(to right, #dc2626, #be185d) padding-box ,
+            linear-gradient(to right, #dc2626, #be185d) border-box;
+        @apply border-solid border-transparent border-[2.5px] px-4 py-2
+    }
+}

components/App/Button.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+
 import type { RouteRecordRaw } from 'vue-router';
 
 const STYLES = {
@@ -8,10 +9,7 @@ const STYLES = {
   },
   secondary: {
     needsPseudo: true,
-    all: 'text-white uppercase font-semibold sm:font-bold group px-4 py-2 relative',
-    main: 'relative z-20',
-    before: 'absolute bg-gradient-to-r from-red-600 to-pink-700 top-0 left-0 w-full h-full z-10',
-    after: 'group-hover:hidden absolute top-0.5 left-0.5 bottom-0 right-0 w-[calc(100%-0.25rem)] h-[calc(100%-0.25rem)] z-10'
+     all:'text-white uppercase font-semibold sm:font-bold bg-gradient-to-r from-red-500 to-red-500',
   }
 } as const
 
@@ -35,14 +33,12 @@ const componentToRender = computed(() => props.to ? resolveComponent('AppLink')
   <component :is="componentToRender" :type="to ? undefined : 'button'" :class="selectedLook.all" :to="to"
     class="focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-600 inline-block">
     <template v-if="selectedLook.needsPseudo">
-      <span :class="selectedLook.before" />
-      <span :class="'main' in selectedLook && selectedLook.main">
+     <article :class="[selectedLook.main,'newButton']">
         <slot />
-      </span>
-      <span :class="[selectedLook.after, secondaryAfterBg]" />
+      </article>
     </template>
     <template v-else>
       <slot />
     </template>
   </component>
-</template>
+</template>

nuxt.config.ts

@@ -82,7 +82,9 @@ export default defineNuxtConfig({
           }
         }
       }
-    }
+    },
+    cssPath: '~/assets/custom.css',
+    exposeConfig: true
   },
 
   devtools: {