liveh5-nuxt/app/components/x-button/index.vue

<script setup>
import { ref } from "vue";

const isButtonActive = ref(false);

const handleButtonPress = (event) => {
  event.stopPropagation();
  isButtonActive.value = true;
};

const handleButtonRelease = (event) => {
  event.stopPropagation();
  isButtonActive.value = false;
};
</script>

<template>
  <div
      :class="[
      'transition-all duration-200',
      isButtonActive ? 'scale-95' : ''
    ]"
      @touchstart.stop="handleButtonPress"
      @touchend.stop="handleButtonRelease"
  >
    <slot></slot>
  </div>
</template>