Sliding Icon Button (Hover reveal)

<script setup lang="ts">
import { Button } from "@/components/ui/button"
</script>

<template>
  <Button class="group/sliding relative overflow-hidden rounded-full px-6">
    <span class="inline-flex items-center transition-transform duration-300 group-hover/sliding:-translate-x-2">
      Get Started
    </span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      aria-hidden="true"
      class="lucide lucide-arrow-right absolute right-2.5 translate-x-8 opacity-0 transition-all duration-300 group-hover/sliding:translate-x-0 group-hover/sliding:opacity-100"
    >
      <path d="M5 12h14" />
      <path d="m12 5 7 7-7 7" />
    </svg>
  </Button>
</template>