<script setup lang="ts">
withDefaults(
  defineProps<{
    accent?: string;
    secondary?: string;
    cycleSeconds?: number;
    glowBlur?: number;
    width?: number;
  }>(),
  { accent: "#FF6A1F", secondary: "#FF4D8D", cycleSeconds: 6, glowBlur: 20, width: 130 },
);
</script>

<template>
  <button
    type="button"
    class="underglow-pill"
    :style="{
      '--accent': accent,
      '--secondary': secondary,
      '--period': width + 'px',
      '--cycle': cycleSeconds + 's',
      '--blur': glowBlur + 'px',
    }"
  >
    <span class="underglow-pill__glow" aria-hidden="true">
      <span class="underglow-pill__band"></span>
    </span>
    <span class="underglow-pill__face">
      <span class="underglow-pill__band"></span>
    </span>
    <span class="underglow-pill__label"><slot /></span>
  </button>
</template>

<style scoped>
.underglow-pill {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--period);
  height: 45px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 9999px;
  background: #101318;
  color: #fff;
  font: 600 15px/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: transform 120ms ease;
}
.underglow-pill:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.6);
  outline-offset: 2px;
}
.underglow-pill:active {
  transform: translateY(1px);
}
.underglow-pill__glow {
  position: absolute;
  inset: -4px;
  z-index: 0;
  overflow: hidden;
  border-radius: 9999px;
  pointer-events: none;
  filter: blur(var(--blur));
  opacity: 0;
  transition:
    opacity 350ms ease,
    transform 350ms ease;
}
.underglow-pill:active .underglow-pill__glow {
  transform: scale(0.94);
}
.underglow-pill__face {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 9999px;
}
.underglow-pill__band {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 300%;
  background: repeating-linear-gradient(
    90deg,
    var(--accent) 0px,
    var(--secondary) calc(var(--period) / 2),
    var(--accent) var(--period)
  );
  animation: underglow-travel var(--cycle) linear infinite;
  animation-play-state: paused;
}
.underglow-pill:hover .underglow-pill__band,
.underglow-pill:focus-visible .underglow-pill__band {
  animation-play-state: running;
}
.underglow-pill:hover .underglow-pill__glow,
.underglow-pill:focus-visible .underglow-pill__glow {
  opacity: 1;
}
.underglow-pill__label {
  position: relative;
  z-index: 2;
}
@keyframes underglow-travel {
  to {
    transform: translateX(calc(-1 * var(--period)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .underglow-pill__band {
    animation: none;
  }
}
</style>

20:Ta86, 21:T996d,

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

  let {
    accent = "#FF6A1F",
    secondary = "#FF4D8D",
    cycleSeconds = 6,
    glowBlur = 20,
    width = 130,
    children,
  }: {
    accent?: string;
    secondary?: string;
    cycleSeconds?: number;
    glowBlur?: number;
    width?: number;
    children?: Snippet;
  } = $props();
</script>

<button
  type="button"
  class="underglow-pill"
  style="--accent: {accent}; --secondary: {secondary}; --period: {width}px; --cycle: {cycleSeconds}s; --blur: {glowBlur}px"
>
  <span class="glow" aria-hidden="true"><span class="band"></span></span>
  <span class="face"><span class="band"></span></span>
  <span class="label">{@render children?.()}</span>
</button>

<style>
  .underglow-pill {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--period);
    height: 45px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 0.15);
    border-radius: 9999px;
    background: #101318;
    color: #fff;
    font: 600 15px/1 system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition: transform 120ms ease;
  }
  .underglow-pill:focus-visible {
    outline: 2px solid rgb(255 255 255 / 0.6);
    outline-offset: 2px;
  }
  .underglow-pill:active {
    transform: translateY(1px);
  }
  .glow {
    position: absolute;
    inset: -4px;
    z-index: 0;
    overflow: hidden;
    border-radius: 9999px;
    pointer-events: none;
    filter: blur(var(--blur));
    opacity: 0;
    transition:
      opacity 350ms ease,
      transform 350ms ease;
  }
  .underglow-pill:active .glow {
    transform: scale(0.94);
  }
  .face {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: 9999px;
  }
  .band {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 300%;
    background: repeating-linear-gradient(
      90deg,
      var(--accent) 0px,
      var(--secondary) calc(var(--period) / 2),
      var(--accent) var(--period)
    );
    animation: underglow-travel var(--cycle) linear infinite;
    animation-play-state: paused;
  }
  .underglow-pill:hover .band,
  .underglow-pill:focus-visible .band {
    animation-play-state: running;
  }
  .underglow-pill:hover .glow,
  .underglow-pill:focus-visible .glow {
    opacity: 1;
  }
  .label {
    position: relative;
    z-index: 2;
  }
  @keyframes underglow-travel {
    to {
      transform: translateX(calc(-1 * var(--period)));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .band {
      animation: none;
    }
  }
</style>

Nearby