20:T97ce,

<script lang="ts">
  let {
    label = "Enter room",
    accent = "#38BDF8",
    width = 200,
    travel = 15,
    trail = true,
  }: { label?: string; accent?: string; width?: number; travel?: number; trail?: boolean } = $props();
</script>

<button
  type="button"
  class="gap-button"
  style={"width: " + width + "px; background: " + accent + "; --shift: " + travel + "px"}
>
  <span class="gap-button__label">{label}</span>
  <span class="gap-button__arrowbox">
    {#if trail}
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="gap-button__trail">
        <path d="M4 12h15" />
        <path d="M13 6l6 6-6 6" />
      </svg>
    {/if}
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="gap-button__arrow">
      <path d="M4 12h15" />
      <path d="M13 6l6 6-6 6" />
    </svg>
  </span>
</button>

<style>
  .gap-button {
    --shift: 15px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 1.25rem;
    border: none;
    border-radius: 9999px;
    color: #fff;
    font: 500 18px/1 system-ui, sans-serif;
    cursor: pointer;
    user-select: none;
    transition: transform 150ms ease-out;
  }
  .gap-button:active {
    transform: scale(0.9);
  }
  .gap-button:focus-visible {
    outline: 2px solid rgb(255 255 255 / 0.8);
    outline-offset: 3px;
  }
  .gap-button__label {
    position: relative;
    z-index: 1;
    white-space: nowrap;
  }
  .gap-button__arrowbox {
    position: relative;
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: none;
    margin-left: 10px;
  }
  .gap-button__arrow {
    position: relative;
    width: 20px;
    height: 20px;
    transition: transform 300ms cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  .gap-button__trail {
    position: absolute;
    inset: 0;
    width: 20px;
    height: 20px;
    opacity: 0.3;
    transition: transform 380ms cubic-bezier(0.22, 0.9, 0.3, 1) 90ms;
  }
  .gap-button:hover .gap-button__arrow,
  .gap-button:focus-visible .gap-button__arrow {
    transform: translateX(var(--shift));
  }
  .gap-button:hover .gap-button__trail,
  .gap-button:focus-visible .gap-button__trail {
    transform: translateX(calc(var(--shift) * 0.6));
  }
  .gap-button:active .gap-button__arrow,
  .gap-button:active .gap-button__trail {
    transform: translateX(0);
    transition: transform 80ms ease-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .gap-button__arrow,
    .gap-button__trail {
      transform: none !important;
      transition: none;
    }
    .gap-button__trail {
      opacity: 0;
    }
  }
</style>

21:Tadc,--- interface Props { label?: string; accent?: string; width?: number; travel?: number; trail?: boolean; } const { label = "Enter room", accent = "#38BDF8", width = 200, travel = 15, trail = true } = Astro.props; --- 22:T950d,

---
interface Props {
  label?: string;
  accent?: string;
  width?: number;
  travel?: number;
  trail?: boolean;
}
const { label = "Enter room", accent = "#38BDF8", width = 200, travel = 15, trail = true } = Astro.props;
---

<button
  type="button"
  class="gap-button"
  style={"width: " + width + "px; background: " + accent + "; --shift: " + travel + "px"}
>
  <span class="gap-button__label">{label}</span>
  <span class="gap-button__arrowbox">
    {trail && (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="gap-button__trail">
        <path d="M4 12h15" />
        <path d="M13 6l6 6-6 6" />
      </svg>
    )}
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="gap-button__arrow">
      <path d="M4 12h15" />
      <path d="M13 6l6 6-6 6" />
    </svg>
  </span>
</button>

<style>
  .gap-button {
    --shift: 15px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 1.25rem;
    border: none;
    border-radius: 9999px;
    color: #fff;
    font: 500 18px/1 system-ui, sans-serif;
    cursor: pointer;
    user-select: none;
    transition: transform 150ms ease-out;
  }
  .gap-button:active {
    transform: scale(0.9);
  }
  .gap-button:focus-visible {
    outline: 2px solid rgb(255 255 255 / 0.8);
    outline-offset: 3px;
  }
  .gap-button__label {
    position: relative;
    z-index: 1;
    white-space: nowrap;
  }
  .gap-button__arrowbox {
    position: relative;
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: none;
    margin-left: 10px;
  }
  .gap-button__arrow {
    position: relative;
    width: 20px;
    height: 20px;
    transition: transform 300ms cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  .gap-button__trail {
    position: absolute;
    inset: 0;
    width: 20px;
    height: 20px;
    opacity: 0.3;
    transition: transform 380ms cubic-bezier(0.22, 0.9, 0.3, 1) 90ms;
  }
  .gap-button:hover .gap-button__arrow,
  .gap-button:focus-visible .gap-button__arrow {
    transform: translateX(var(--shift));
  }
  .gap-button:hover .gap-button__trail,
  .gap-button:focus-visible .gap-button__trail {
    transform: translateX(calc(var(--shift) * 0.6));
  }
  .gap-button:active .gap-button__arrow,
  .gap-button:active .gap-button__trail {
    transform: translateX(0);
    transition: transform 80ms ease-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .gap-button__arrow,
    .gap-button__trail {
      transform: none !important;
      transition: none;
    }
    .gap-button__trail {
      opacity: 0;
    }
  }
</style>

Nearby