20:T91f9,

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

  let {
    accent = "#38BDF8",
    deep = "#1D4ED8",
    duration = 800,
    dome = true,
    children,
  }: { accent?: string; deep?: string; duration?: number; dome?: boolean; children?: Snippet } = $props();
</script>

<button
  type="button"
  class="pann-button"
  style="--pann-accent: {accent}; --pann-deep: {deep}; --pann-ms: {duration}ms"
>
  <span aria-hidden="true" class="gradient"></span>
  <span aria-hidden="true" class="lift"></span>
  {#if dome}<span aria-hidden="true" class="dome"></span>{/if}
  <span class="label">{@render children?.()}</span>
</button>

<style>
  .pann-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    padding: 0.75rem 1.5rem;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.15);
    border-radius: 0.5rem;
    color: #fff;
    font: 500 1rem/1.5rem system-ui, sans-serif;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--pann-deep) 65%, transparent);
  }
  .pann-button:hover .gradient {
    background-position: 100% 0;
  }
  .pann-button:hover .lift {
    opacity: 1;
  }
  .pann-button:focus-visible,
  .pann-button:active {
    box-shadow: 0 0 0 2px var(--pann-accent), 0 0 0 4px var(--pann-deep);
    outline: none;
  }
  .gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(105deg, var(--pann-deep) 0%, var(--pann-accent) 50%, var(--pann-deep) 100%);
    background-size: 280% 100%;
    background-position: 0% 0;
    transition: background-position var(--pann-ms) cubic-bezier(0.65, 0, 0.35, 1);
  }
  .lift {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgb(255 255 255 / 0.1);
    opacity: 0;
    transition: opacity var(--pann-ms) linear;
  }
  .dome {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 2px 2px 4px rgb(255 255 255 / 0.35), inset -2px -3px 6px rgb(0 0 0 / 0.45);
  }
  .label {
    position: relative;
    z-index: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .gradient {
      transition: none;
    }
    .pann-button:hover .gradient {
      background-position: 0% 0;
    }
    .lift {
      transition-duration: 180ms;
    }
  }
</style>

21:T9d9,--- interface Props { accent?: string; deep?: string; duration?: number; dome?: boolean; } const { accent = "#38BDF8", deep = "#1D4ED8", duration = 800, dome = true } = Astro.props; --- 22:T8b73,

---
interface Props {
  accent?: string;
  deep?: string;
  duration?: number;
  dome?: boolean;
}
const { accent = "#38BDF8", deep = "#1D4ED8", duration = 800, dome = true } = Astro.props;
---

<button
  type="button"
  class="pann-button"
  style={`--pann-accent: ${accent}; --pann-deep: ${deep}; --pann-ms: ${duration}ms`}
  data-panning-gradient-button
>
  <span aria-hidden="true" class="pann-button__gradient"></span>
  <span aria-hidden="true" class="pann-button__lift"></span>
  {dome && <span aria-hidden="true" class="pann-button__dome"></span>}
  <span class="pann-button__label"><slot /></span>
</button>

<style>
  .pann-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    padding: 0.75rem 1.5rem;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.15);
    border-radius: 0.5rem;
    color: #fff;
    font: 500 1rem/1.5rem system-ui, sans-serif;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--pann-deep) 65%, transparent);
  }
  .pann-button:hover .pann-button__gradient {
    background-position: 100% 0;
  }
  .pann-button:hover .pann-button__lift {
    opacity: 1;
  }
  .pann-button:focus-visible,
  .pann-button:active {
    box-shadow: 0 0 0 2px var(--pann-accent), 0 0 0 4px var(--pann-deep);
    outline: none;
  }
  .pann-button__gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(105deg, var(--pann-deep) 0%, var(--pann-accent) 50%, var(--pann-deep) 100%);
    background-size: 280% 100%;
    background-position: 0% 0;
    transition: background-position var(--pann-ms) cubic-bezier(0.65, 0, 0.35, 1);
  }
  .pann-button__lift {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgb(255 255 255 / 0.1);
    opacity: 0;
    transition: opacity var(--pann-ms) linear;
  }
  .pann-button__dome {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 2px 2px 4px rgb(255 255 255 / 0.35), inset -2px -3px 6px rgb(0 0 0 / 0.45);
  }
  .pann-button__label {
    position: relative;
    z-index: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .pann-button__gradient {
      transition: none;
    }
    .pann-button:hover .pann-button__gradient {
      background-position: 0% 0;
    }
    .pann-button__lift {
      transition-duration: 180ms;
    }
  }
</style>

Nearby