1f:Td61a,

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

const RETRACT_MS = 180;

const props = withDefaults(
  defineProps<{
    label?: string;
    confirmLabel?: string;
    accent?: string;
    drawMs?: number;
    holdMs?: number;
  }>(),
  { label: "Submit", confirmLabel: "Sent", accent: "#38BDF8", drawMs: 520, holdMs: 1400 },
);

type Phase = "idle" | "retract" | "confirm";

const phase = ref<Phase>("idle");
let timers: number[] = [];

const retracting = computed(() => phase.value === "retract");
const confirming = computed(() => phase.value === "confirm");

function clearTimers() {
  for (const timer of timers) window.clearTimeout(timer);
  timers = [];
}

function press() {
  if (phase.value !== "idle") return;
  clearTimers();
  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reduced) {
    phase.value = "confirm";
    timers.push(window.setTimeout(() => (phase.value = "idle"), props.holdMs));
    return;
  }
  phase.value = "retract";
  timers.push(window.setTimeout(() => (phase.value = "confirm"), RETRACT_MS));
  timers.push(window.setTimeout(() => (phase.value = "idle"), RETRACT_MS + props.drawMs + props.holdMs));
}

onBeforeUnmount(clearTimers);
</script>

<template>
  <button
    type="button"
    class="csb"
    :class="{ 'csb--retract': retracting, 'csb--confirm': confirming }"
    :style="{ background: accent, '--csb-accent': accent, '--csb-draw': drawMs + 'ms' }"
    :disabled="phase !== 'idle'"
    @click="press"
  >
    <svg class="csb__check" width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path
        class="csb__path"
        d="M4.5 12.5 L10 18 L19.5 6.5"
        pathLength="1"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-dasharray="1"
      />
    </svg>
    <span class="csb__text" aria-live="polite">
      <span class="csb__sizer" aria-hidden="true">{{ label }}</span>
      <span class="csb__sizer" aria-hidden="true">{{ confirmLabel }}</span>
      <span class="csb__visible" :class="{ 'csb__visible--dim': retracting }">
        <span class="csb__word" :class="{ 'csb__word--hidden': confirming }">{{ label }}</span>
        <span class="csb__word" :class="{ 'csb__word--hidden': !confirming }">{{ confirmLabel }}</span>
      </span>
    </span>
  </button>
</template>

<style scoped>
.csb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: none;
  border-radius: 0.375rem;
  background: #38bdf8;
  color: #fff;
  font: 600 0.875rem/1.25rem system-ui, sans-serif;
  letter-spacing: -0.01em;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.28);
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: filter 150ms ease, transform 150ms ease;
}
.csb:not(:disabled):hover {
  filter: brightness(1.1);
}
.csb:not(:disabled):active {
  transform: translateY(1px);
  filter: brightness(0.95);
}
.csb:focus-visible {
  outline: none;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.28), 0 0 0 2px var(--csb-accent, #38bdf8),
    0 0 0 4px transparent;
}
.csb:disabled {
  cursor: default;
  filter: brightness(0.95);
}
.csb__check {
  flex-shrink: 0;
}
.csb__path {
  stroke-dashoffset: 0;
}
.csb--retract .csb__path {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 1, 1);
}
.csb--confirm .csb__path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--csb-draw, 520ms) cubic-bezier(0.22, 1, 0.36, 1);
}
.csb__text {
  display: grid;
}
.csb__sizer {
  grid-area: 1 / 1;
  visibility: hidden;
  white-space: nowrap;
}
.csb__visible {
  grid-area: 1 / 1;
  display: grid;
  transition: opacity 150ms ease;
}
.csb__visible--dim {
  opacity: 0.6;
}
.csb__word {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 150ms ease;
}
.csb__word--hidden {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .csb--retract .csb__path,
  .csb--confirm .csb__path {
    transition-duration: 1ms;
  }
  .csb__visible,
  .csb__word {
    transition-duration: 1ms;
  }
}
</style>

20:Tf8c, 21:Te2c4,

<script lang="ts">
  const RETRACT_MS = 180;

  type Phase = "idle" | "retract" | "confirm";

  let {
    label = "Submit",
    confirmLabel = "Sent",
    accent = "#38BDF8",
    drawMs = 520,
    holdMs = 1400,
  }: { label?: string; confirmLabel?: string; accent?: string; drawMs?: number; holdMs?: number } =
    $props();

  let phase: Phase = $state("idle");
  let timers: ReturnType<typeof setTimeout>[] = [];

  const retracting = $derived(phase === "retract");
  const confirming = $derived(phase === "confirm");

  function clearTimers() {
    for (const timer of timers) clearTimeout(timer);
    timers = [];
  }

  function press() {
    if (phase !== "idle") return;
    clearTimers();
    const reduced =
      typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduced) {
      phase = "confirm";
      timers.push(setTimeout(() => (phase = "idle"), holdMs));
      return;
    }
    phase = "retract";
    timers.push(setTimeout(() => (phase = "confirm"), RETRACT_MS));
    timers.push(setTimeout(() => (phase = "idle"), RETRACT_MS + drawMs + holdMs));
  }

  $effect(() => {
    return () => clearTimers();
  });
</script>

<button
  type="button"
  class="csb"
  class:is-retract={retracting}
  class:is-confirm={confirming}
  style="background: {accent}; --csb-accent: {accent}; --csb-draw: {drawMs}ms"
  disabled={phase !== "idle"}
  onclick={press}
>
  <svg class="check" width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path
      class="path"
      d="M4.5 12.5 L10 18 L19.5 6.5"
      pathLength="1"
      stroke="currentColor"
      stroke-width="1.75"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-dasharray="1"
    />
  </svg>
  <span class="text" aria-live="polite">
    <span class="sizer" aria-hidden="true">{label}</span>
    <span class="sizer" aria-hidden="true">{confirmLabel}</span>
    <span class="visible" class:dim={retracting}>
      <span class="word" class:hidden={confirming}>{label}</span>
      <span class="word" class:hidden={!confirming}>{confirmLabel}</span>
    </span>
  </span>
</button>

<style>
  .csb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: none;
    border-radius: 0.375rem;
    color: #fff;
    font: 600 0.875rem/1.25rem system-ui, sans-serif;
    letter-spacing: -0.01em;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.28);
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: filter 150ms ease, transform 150ms ease;
  }
  .csb:not(:disabled):hover {
    filter: brightness(1.1);
  }
  .csb:not(:disabled):active {
    transform: translateY(1px);
    filter: brightness(0.95);
  }
  .csb:focus-visible {
    outline: none;
    box-shadow:
      inset 0 -1px 0 rgb(0 0 0 / 0.28),
      0 0 0 2px var(--csb-accent, #38bdf8),
      0 0 0 4px transparent;
  }
  .csb:disabled {
    cursor: default;
    filter: brightness(0.95);
  }
  .check {
    flex-shrink: 0;
  }
  .path {
    stroke-dashoffset: 0;
  }
  .is-retract .path {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 1, 1);
  }
  .is-confirm .path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--csb-draw, 520ms) cubic-bezier(0.22, 1, 0.36, 1);
  }
  .text {
    display: grid;
  }
  .sizer {
    grid-area: 1 / 1;
    visibility: hidden;
    white-space: nowrap;
  }
  .visible {
    grid-area: 1 / 1;
    display: grid;
    transition: opacity 150ms ease;
  }
  .dim {
    opacity: 0.6;
  }
  .word {
    grid-area: 1 / 1;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 150ms ease;
  }
  .hidden {
    opacity: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .is-retract .path,
    .is-confirm .path {
      transition-duration: 1ms;
    }
    .visible,
    .word {
      transition-duration: 1ms;
    }
  }
</style>

Nearby