20:Tba4c,

<script lang="ts">
  import type { Snippet } from "svelte";

  let {
    accent = "#38BDF8",
    haloWidth = 4,
    driftSeconds = 12,
    children,
  }: { accent?: string; haloWidth?: number; driftSeconds?: number; children?: Snippet } = $props();
</script>

<button
  type="button"
  class="dhb"
  style="--dhb-accent: {accent}; --dhb-halo: {haloWidth}px; --dhb-lap: {driftSeconds}s"
>
  <span aria-hidden="true" class="dhb-halo">
    <span aria-hidden="true" class="dhb-rotor"></span>
  </span>
  <span class="dhb-plate">
    <span class="dhb-label">{@render children?.()}</span>
  </span>
</button>

<style>
  .dhb {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    border: 0;
    padding: 0;
    background: transparent;
    font: 600 1rem/1.2 system-ui, sans-serif;
    cursor: pointer;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  .dhb-halo {
    position: absolute;
    inset: calc(var(--dhb-halo) * -1);
    border-radius: calc(4px + var(--dhb-halo) / 2);
    background: color-mix(in oklab, var(--dhb-accent) 30%, #0b0d10);
    overflow: hidden;
    pointer-events: none;
  }
  .dhb-rotor {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(0deg);
    background: conic-gradient(from 0deg, transparent 0deg 300deg, var(--dhb-accent) 332deg, transparent 364deg);
    animation: dhb-drift var(--dhb-lap) linear infinite;
    transition: filter 180ms ease;
  }
  .dhb-plate {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    height: 50px;
    padding: 0 20px;
    border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: 4px;
    background: #151a21;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
  }
  .dhb-label {
    white-space: nowrap;
    color: #f4f7fa;
    transition: color 160ms ease;
  }
  .dhb:hover .dhb-plate,
  .dhb:focus-visible .dhb-plate,
  .dhb:active .dhb-plate {
    border-color: transparent;
    background: var(--dhb-accent);
    transform: translateY(-2px) scale(1.02);
  }
  .dhb:hover .dhb-label,
  .dhb:focus-visible .dhb-label,
  .dhb:active .dhb-label {
    color: #0e1218;
  }
  .dhb:active .dhb-plate {
    transform: translateY(0) scale(1);
  }
  .dhb:hover .dhb-rotor,
  .dhb:focus-visible .dhb-rotor,
  .dhb:active .dhb-rotor {
    filter: brightness(1.45) saturate(1.15);
    animation-duration: calc(var(--dhb-lap) * 0.66);
  }
  .dhb:focus-visible {
    outline: 2px solid var(--dhb-accent);
    outline-offset: calc(var(--dhb-halo) + 3px);
  }
  @keyframes dhb-drift {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .dhb-rotor {
      animation: none;
      transform: translate(-50%, -50%) rotate(210deg);
      transition: none;
    }
    .dhb-plate {
      transition: none;
    }
    .dhb:hover .dhb-plate,
    .dhb:focus-visible .dhb-plate,
    .dhb:active .dhb-plate {
      transform: none;
    }
  }
</style>

21:Tc22,--- interface Props { accent?: string; haloWidth?: number; driftSeconds?: number; } const { accent = "#38BDF8", haloWidth = 4, driftSeconds = 12 } = Astro.props; --- 22:Tb352,

---
interface Props {
  accent?: string;
  haloWidth?: number;
  driftSeconds?: number;
}
const { accent = "#38BDF8", haloWidth = 4, driftSeconds = 12 } = Astro.props;
---

<button
  type="button"
  class="dhb"
  style={`--dhb-accent: ${accent}; --dhb-halo: ${haloWidth}px; --dhb-lap: ${driftSeconds}s`}
>
  <span aria-hidden="true" class="dhb-halo">
    <span aria-hidden="true" class="dhb-rotor"></span>
  </span>
  <span class="dhb-plate">
    <span class="dhb-label"><slot /></span>
  </span>
</button>

<style>
  .dhb {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    border: 0;
    padding: 0;
    background: transparent;
    font: 600 1rem/1.2 system-ui, sans-serif;
    cursor: pointer;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  .dhb-halo {
    position: absolute;
    inset: calc(var(--dhb-halo) * -1);
    border-radius: calc(4px + var(--dhb-halo) / 2);
    background: color-mix(in oklab, var(--dhb-accent) 30%, #0b0d10);
    overflow: hidden;
    pointer-events: none;
  }
  .dhb-rotor {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(0deg);
    background: conic-gradient(from 0deg, transparent 0deg 300deg, var(--dhb-accent) 332deg, transparent 364deg);
    animation: dhb-drift var(--dhb-lap) linear infinite;
    transition: filter 180ms ease;
  }
  .dhb-plate {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    height: 50px;
    padding: 0 20px;
    border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: 4px;
    background: #151a21;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
  }
  .dhb-label {
    white-space: nowrap;
    color: #f4f7fa;
    transition: color 160ms ease;
  }
  .dhb:hover .dhb-plate,
  .dhb:focus-visible .dhb-plate,
  .dhb:active .dhb-plate {
    border-color: transparent;
    background: var(--dhb-accent);
    transform: translateY(-2px) scale(1.02);
  }
  .dhb:hover .dhb-label,
  .dhb:focus-visible .dhb-label,
  .dhb:active .dhb-label {
    color: #0e1218;
  }
  .dhb:active .dhb-plate {
    transform: translateY(0) scale(1);
  }
  .dhb:hover .dhb-rotor,
  .dhb:focus-visible .dhb-rotor,
  .dhb:active .dhb-rotor {
    filter: brightness(1.45) saturate(1.15);
    animation-duration: calc(var(--dhb-lap) * 0.66);
  }
  .dhb:focus-visible {
    outline: 2px solid var(--dhb-accent);
    outline-offset: calc(var(--dhb-halo) + 3px);
  }
  @keyframes dhb-drift {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .dhb-rotor {
      animation: none;
      transform: translate(-50%, -50%) rotate(210deg);
      transition: none;
    }
    .dhb-plate {
      transition: none;
    }
    .dhb:hover .dhb-plate,
    .dhb:focus-visible .dhb-plate,
    .dhb:active .dhb-plate {
      transform: none;
    }
  }
</style>

Nearby