Round Special Button

Component Code

#tailwind #alpine

<div class="aspect-square w-full">
  <div class="relative h-full rounded-2xl bg-blue-400">
    <div x-data>
      <div
        class="absolute left-1/2 top-1/2 z-20 aspect-square w-1/3 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full bg-white"
        @mousedown.prevent="$event.target.after($refs.template.content.cloneNode(true))"
        @touchstart.prevent="$event.target.after($refs.template.content.cloneNode(true))">
      </div>
      <template x-ref="template">
        <div
          class="absolute left-1/2 top-1/2 z-10 !mt-0 aspect-square w-1/3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white"
          :class="'opacity-100 transition ease-out duration-[2000ms]'"
          x-init="$nextTick(() => $el.classList.add('!opacity-0', 'scale-[3]'))"
          x-on:transitionend="$el.remove()">
        </div>
      </template>
    </div>
  </div>
</div>