feathersjs/feathers

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  primary: Boolean,
  href: String
})

const classes = computed(() => {
  return { 'btn-primary': props.primary }
})
</script>

<template>
  <a
    :href="href || '/guides/'"
    class="btn text-md font-bold uppercase px-6 py-0.5 rounded-full"
    md="text-lg px-8 py-1.6"
    lg="py-2.8 px-12"
    :class="classes"
  >
    <slot />
  </a>
</template>

<style lang="postcss">
.btn {
  animation: button-pop var(--animation-btn, 0.25s) ease-out;
}
.btn:active:hover,
.btn:active:focus {
  animation: none;
}
.btn:active:hover,
.btn:active:focus {
  transform: scale(var(--btn-focus-scale, 0.95));
}

.btn-primary {
  background-color: var(--vp-c-brand);
  transition: all 300ms;
}
.btn-primary:hover {
  background-color: var(--vp-c-brand-darker);
}

@keyframes button-pop {
  0% {
    transform: scale(var(--btn-focus-scale, 0.95));
  }
  40% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
</style>