PushButton.vue

<template lang="pug">
button.py-2.px-3.rounded.tran-colors-p1.relative.overflow-hidden(
  @click="click",
  :class="[themes[theme], cursor]")
  .flex.items-center.tran-opacity-p5(:class="{'opacity-25': loading, 'opacity-0': success}")
    .mdi(v-if="icon",:class="[`mdi-${icon}`, label ? 'mr-2' : '']")
    img.w-4.h-4(v-if="image",:src="image",:class="label ? 'mr-2' : ''")
    div(v-if="label") {{ label }}
  .bg-white-o3.button-loadbar.ani-zi(v-if="loading")
  .absolute.inset-0.flex.items-center.justify-center(v-if="success")
    .mdi.mdi-24px.mdi-check-bold.ani-zif
</template>

<script>
export default {
  props: {
    label: {
      type: [Boolean,String],
      required: false,
      default: false,
    },
    icon: {
      type: [String, Boolean],
      required: false,
      default: false,
    },
    image: {
      type: [Boolean,String],
      required: false,
      default: false,
    },
    theme: {
      type: String,
      required: false,
      default: 'white',
    },
    loading: {
      type: Boolean,
      required: false,
      default: false,
    },
    success: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data () {
    return {
      themes: {
        white: 'text-white bg-white-o1 hover_bg-white-o2 focus_outline-none',
      }
    }
  },
  computed: {
    cursor () {
      return this.loading ? 'cursor-wait' : 'cursor-pointer'
    }
  },
  methods: {
    click () { return this.$emit('click') },
  },
}
</script>

.button-loadbar
  @apply absolute left-0 right-0 bottom-0 h-1 w-1_2 ani-loading

.ani-loading
  animation ani-loading 1s linear 0s infinite

@keyframes ani-loading
  from
    transform translate(-100%, 0px)
  to
    transform translate(200%, 0px)

For those who don't want the pug version

<button class="py-2 px-3 rounded tran-colors-p1 relative overflow-hidden" @click="click" :class="[themes[theme], cursor]">
    <div class="flex items-center tran-opacity-p5" :class="{'opacity-25': loading, 'opacity-0': success}">
        <div class="mdi" v-if="icon" :class="[`mdi-${icon}`, label ? 'mr-2' : '']"></div><img class="w-4 h-4" v-if="image" :src="image" :class="label ? 'mr-2' : ''" />
        <div v-if="label">{{ label }}</div>
    </div>
    <div class="bg-white-o3 button-loadbar ani-zi" v-if="loading"></div>
    <div class="absolute inset-0 flex items-center justify-center" v-if="success">
        <div class="mdi mdi-24px mdi-check-bold ani-zif"></div>
    </div>
</button>