feat: add button component

src/components/Button.vue

@@ -0,0 +1,52 @@
+<template>
+  <a
+    class="btn"
+    :href="href"
+    :download="href.slice(href.lastIndexOf('/') + 1)"
+    v-if="download"
+  >
+    <slot></slot> ⬇️
+  </a>
+  <a class="btn" :href="href" v-else> <slot></slot> ⬇️ </a>
+</template>
+
+<script>
+export default {
+  props: {
+    href: String,
+    download: Boolean,
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/scss/_variables.scss";
+
+.btn {
+  margin: 0.5em 0;
+  padding: 0.5em 1em;
+
+  position: relative;
+  top: 0;
+
+  border-radius: 0.25em;
+  box-shadow: 0 0.5em 0 0 $bg-color-dark;
+
+  transition: all 0.1s ease-out;
+
+  background-color: lighten($bg-color-dark, 5%);
+
+  text-decoration: none;
+  text-align: center;
+
+  &:hover {
+    top: -0.25em;
+    box-shadow: 0 0.75em 0 0 $bg-color-dark;
+  }
+
+  &:active {
+    top: 0.25em;
+    box-shadow: 0 0.25em 0 0 $bg-color-dark;
+  }
+}
+</style>

src/components/Prose.vue

@@ -14,7 +14,8 @@
   h2,
   h3,
   p,
-  .quickfacts {
+  .quickfacts,
+  .btn-group {
     max-width: 55rem;
     margin: {
       left: 1rem;