feat: shadow and gradient outline

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>