<template >
  <button v-bind="$attrs" v-on="$listeners" :class="active ? ['custom-button', 'active'] : ['custom-button']">
    <slot />
  </button>
</template>

<script>

export default {
  name: 'Button',
  props: {
    active: {
      type: Boolean,
      default: () => false
    }
  },
  methods: {}
}
</script>

<style scoped lang='less'>
.custom-button {
  color: #fff;
  font-size: 12px;
  height: 32px;
  padding: 0px 20px;
  border: 2px solid;
  background-color: transparent;
  border-color: #192A66;
  cursor: pointer;
  
  &:active{
    .active();
  }

  &:hover {
    .active();
  }
}

.active {
  border-image-source: linear-gradient(to right,#054b99 0%, #00f6ff 100%);
  border-image-slice: 1;
}
</style>
