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

const props = withDefaults(
  defineProps<{
    label?: string;
    accent?: string;
    travel?: number;
    tracking?: number;
  }>(),
  { label: "Send", accent: "#38BDF8", travel: 12, tracking: 1 },
);

const slid = ref(false);
const pressing = ref(false);
const tapping = ref(false);

function enter(event: PointerEvent) {
  if (event.pointerType === "touch") return;
  slid.value = true;
}

function leave() {
  slid.value = false;
  pressing.value = false;
}

function down(event: PointerEvent) {
  if (event.pointerType === "touch" || !slid.value) return;
  pressing.value = true;
}

function up(event: PointerEvent) {
  if (event.pointerType === "touch") return;
  pressing.value = false;
}

function tap(event: MouseEvent) {
  const pointer = event as PointerEvent;
  if (typeof pointer.pointerType === "string" && pointer.pointerType === "touch") {
    tapping.value = true;
  }
}

function tapEnd() {
  tapping.value = false;
}

function focusSlide() {
  slid.value = true;
}

function blurSlide() {
  slid.value = false;
  pressing.value = false;
}
</script>

<template>
  <button
    type="button"
    class="sliding-send"
    :class="{ 'sliding-send--slid': slid, 'sliding-send--press': pressing, 'sliding-send--tap': tapping }"
    :style="{ '--accent': props.accent, '--travel': props.travel + 'px', letterSpacing: props.tracking + 'px' }"
    @pointerenter="enter"
    @pointerleave="leave"
    @pointerdown="down"
    @pointerup="up"
    @click="tap"
    @animationend="tapEnd"
    @focus="focusSlide"
    @blur="blurSlide"
  >
    <span class="sliding-send__label">{{ label }}</span>
    <span aria-hidden="true" class="sliding-send__arrow">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M4 12h15" />
        <path d="M13.5 6.5 19 12l-5.5 5.5" />
      </svg>
    </span>
  </button>
</template>

<style scoped>
.sliding-send {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #f5faff;
  font: 600 0.875rem/1.25rem system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition:
    transform 300ms cubic-bezier(0.32, 0.72, 0.24, 1),
    filter 300ms ease;
}
.sliding-send:hover,
.sliding-send:focus-visible {
  filter: brightness(1.1);
}
.sliding-send:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.7);
  outline-offset: 2px;
}
.sliding-send--slid {
  transform: translateX(var(--travel));
}
.sliding-send--slid .sliding-send__arrow {
  transform: translateX(4px);
}
.sliding-send--press {
  transform: translateX(calc(var(--travel) - 5px));
  transition-duration: 120ms;
}
.sliding-send__arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
.sliding-send--tap {
  animation: sliding-send-tap 380ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
@keyframes sliding-send-tap {
  0% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(var(--travel));
  }
  100% {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sliding-send,
  .sliding-send__arrow {
    transition-duration: 1ms;
  }
  .sliding-send--slid,
  .sliding-send--press,
  .sliding-send--slid .sliding-send__arrow {
    transform: none;
  }
  .sliding-send--tap {
    animation: none;
  }
}
</style>

1f:Tca7, 20:Tba95,

<script lang="ts">
  let {
    label = "Send",
    accent = "#38BDF8",
    travel = 12,
    tracking = 1,
  }: { label?: string; accent?: string; travel?: number; tracking?: number } = $props();

  let slid = $state(false);
  let pressing = $state(false);
  let tapping = $state(false);

  function enter(event: PointerEvent) {
    if (event.pointerType === "touch") return;
    slid = true;
  }

  function leave() {
    slid = false;
    pressing = false;
  }

  function down(event: PointerEvent) {
    if (event.pointerType === "touch" || !slid) return;
    pressing = true;
  }

  function up(event: PointerEvent) {
    if (event.pointerType === "touch") return;
    pressing = false;
  }

  function tap(event: MouseEvent) {
    const pointer = event as PointerEvent;
    if (typeof pointer.pointerType === "string" && pointer.pointerType === "touch") {
      tapping = true;
    }
  }

  function tapEnd() {
    tapping = false;
  }

  function focusSlide() {
    slid = true;
  }

  function blurSlide() {
    slid = false;
    pressing = false;
  }
</script>

<button
  type="button"
  class="sliding-send"
  class:slid
  class:pressing
  class:tapping
  style="--accent: {accent}; --travel: {travel}px; letter-spacing: {tracking}px"
  onpointerenter={enter}
  onpointerleave={leave}
  onpointerdown={down}
  onpointerup={up}
  onclick={tap}
  onanimationend={tapEnd}
  onfocus={focusSlide}
  onblur={blurSlide}
>
  <span class="label">{label}</span>
  <span aria-hidden="true" class="arrow">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 12h15" />
      <path d="M13.5 6.5 19 12l-5.5 5.5" />
    </svg>
  </span>
</button>

<style>
  .sliding-send {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: var(--accent);
    color: #f5faff;
    font: 600 0.875rem/1.25rem system-ui, sans-serif;
    cursor: pointer;
    user-select: none;
    outline: none;
    transition:
      transform 300ms cubic-bezier(0.32, 0.72, 0.24, 1),
      filter 300ms ease;
  }
  .sliding-send:hover,
  .sliding-send:focus-visible {
    filter: brightness(1.1);
  }
  .sliding-send:focus-visible {
    outline: 2px solid rgb(255 255 255 / 0.7);
    outline-offset: 2px;
  }
  .slid {
    transform: translateX(var(--travel));
  }
  .slid .arrow {
    transform: translateX(4px);
  }
  .pressing {
    transform: translateX(calc(var(--travel) - 5px));
    transition-duration: 120ms;
  }
  .arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 300ms cubic-bezier(0.32, 0.72, 0.24, 1);
  }
  .tapping {
    animation: tap-slide 380ms cubic-bezier(0.32, 0.72, 0.24, 1);
  }
  @keyframes tap-slide {
    0% {
      transform: translateX(0);
    }
    45% {
      transform: translateX(var(--travel));
    }
    100% {
      transform: translateX(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sliding-send,
    .arrow {
      transition-duration: 1ms;
    }
    .slid,
    .pressing,
    .slid .arrow {
      transform: none;
    }
    .tapping {
      animation: none;
    }
  }
</style>

Nearby