feat: shadow and gradient outline

docs/guide/button/button.md

@@ -7,6 +7,8 @@ import ButtonGradientDuotoneExample from './examples/ButtonGradientDuotoneExampl
 import ButtonOutlineColorExample from './examples/ButtonOutlineColorExample.vue';
 import ButtonPrefixExample from './examples/ButtonPrefixExample.vue';
 import ButtonSuffixExample from './examples/ButtonSuffixExample.vue';
+import ButtonOutlineGradientExample from './examples/ButtonOutlineGradientExample.vue';
+import ButtonGradientShadowExample from './examples/ButtonGradientShadowExample.vue';
 </script>
 
 # Button
@@ -187,6 +189,46 @@ import { Button } from 'flowbite-vue'
 ```
 
 
+## Prop - outline (gradient)
+
+<ButtonOutlineGradientExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button gradient="purple-blue" outline>Purple to blue</Button>
+  <Button gradient="cyan-blue" outline>Cyan to blue</Button>
+  <Button gradient="green-blue" outline>Green to blue</Button>
+  <Button gradient="purple-pink" outline>Purple to pink</Button>
+  <Button gradient="pink-orange" outline>Pink to orange</Button>
+  <Button gradient="teal-lime" outline>Teal to lime</Button>
+  <Button gradient="red-yellow" outline>Red to yellow</Button>
+</template>
+```
+
+## Prop - shadow
+
+<ButtonGradientShadowExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button gradient="blue" shadow>Blue</Button>
+  <Button gradient="cyan" shadow>Cyan</Button>
+  <Button gradient="green" shadow>Green</Button>
+  <Button gradient="lime" shadow>Lime</Button>
+  <Button gradient="pink" shadow>Pink</Button>
+  <Button gradient="purple" shadow>Purple</Button>
+  <Button gradient="red" shadow>Red</Button>
+  <Button gradient="teal" shadow>Teal</Button>
+</template>
+```
+
+
 ## Slot - prefix
 
 <ButtonPrefixExample />
@@ -222,3 +264,5 @@ import { Button } from 'flowbite-vue'
   </Button>
 </template>
 ```
+
+

docs/guide/button/examples/ButtonGradientShadowExample.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="inline-flex align-center gap-2 flex-wrap">
+    <Button gradient="blue" shadow>Blue with blue</Button>
+    <Button gradient="cyan" shadow>Cyan with cyan</Button>
+    <Button gradient="green" shadow>Green with green</Button>
+    <Button gradient="lime" shadow>Lime with lime</Button>
+    <Button gradient="pink" shadow>Pink with pink</Button>
+    <Button gradient="purple" shadow>Purple with purple</Button>
+    <Button gradient="red" shadow>Red with red</Button>
+    <Button gradient="teal" shadow>Teal with teal</Button>
+    <Button gradient="blue" shadow="red">Blue with red</Button>
+    <Button gradient="cyan" shadow="teal">Cyan with teal</Button>
+    <Button gradient="teal" shadow="purple">Teal with purple</Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>

docs/guide/button/examples/ButtonOutlineGradientExample.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="inline-flex align-center gap-2 flex-wrap">
+    <Button gradient="purple-blue" outline>Purple to blue</Button>
+    <Button gradient="cyan-blue" outline>Cyan to blue</Button>
+    <Button gradient="green-blue" outline>Green to blue</Button>
+    <Button gradient="purple-pink" outline>Purple to pink</Button>
+    <Button gradient="pink-orange" outline>Pink to orange</Button>
+    <Button gradient="teal-lime" outline>Teal to lime</Button>
+    <Button gradient="red-yellow" outline>Red to yellow</Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>