Orbiting rim light button

22:Te482,

---
interface Props {
  label?: string;
  accent?: string;
  spinSeconds?: number;
  rimBlur?: number;
  haloSize?: number;
}

const { label = "Open console", accent = "#7C5CFF", spinSeconds = 5, rimBlur = 4, haloSize = 8 } = Astro.props;

function hexToRgbTriplet(hex: string): string {
  const clean = hex.replace("#", "");
  const num = Number.parseInt(clean.length === 3 ? clean.replace(/./g, (c) => c + c) : clean, 16);
  return `${(num >> 16) & 255} ${(num >> 8) & 255} ${num & 255}`;
}

function shade(triplet: string, amount: number): string {
  const [r, g, b] = triplet.split(" ").map(Number);
  const toward = amount >= 0 ? 255 : 0;
  const t = Math.abs(amount);
  const mix = (c: number) => Math.round(c + (toward - c) * t);
  return `${mix(r)} ${mix(g)} ${mix(b)}`;
}

const mid = hexToRgbTriplet(accent);
const light = shade(mid, 0.42);
const dark = shade(mid, -0.36);
const spinIdle = Math.max(1, spinSeconds);
const spinFast = Math.max(1, spinIdle * 0.4);
const focusOffset = Math.round(haloSize * 0.25 + 3);

const buttonStyle = `--orl-mid: ${mid}; --orl-light: ${light}; --orl-dark: ${dark}; --orl-spin: ${spinIdle}s; --orl-spin-fast: ${spinFast}s; --orl-blur: ${rimBlur}px; --orl-halo: ${haloSize}px; --orl-focus: ${focusOffset}px;`;
---

<button type="button" class="orl-button" style={buttonStyle} data-orl-button>
  <span aria-hidden="true" class="orl-halo"></span>
  <span aria-hidden="true" class="orl-wedge"></span>
  <span class="orl-face">{label}</span>
</button>

<style>
  .orl-button {
    position: relative;
    display: inline-block;
    padding: 1px;
    border: 0;
    background: transparent;
    border-radius: 9999px;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transform: translateY(0);
    transition: transform 0.5s ease;
  }
  .orl-button:hover {
    transform: translateY(-1px);
  }
  .orl-button:focus-visible {
    outline: 2px solid rgb(var(--orl-light));
    outline-offset: var(--orl-focus);
  }
  .orl-halo {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
      0 0 calc(var(--orl-halo) * 0.5) calc(var(--orl-halo) * 0.12) rgb(var(--orl-mid) / 0.32),
      0 0 calc(var(--orl-halo) * 1.3) calc(var(--orl-halo) * 0.35) rgb(var(--orl-mid) / 0.14);
  }
  .orl-wedge {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 195deg,
      rgb(var(--orl-dark)) 235deg,
      rgb(var(--orl-mid)) 270deg,
      rgb(var(--orl-light)) 292deg,
      rgb(var(--orl-mid)) 314deg,
      rgb(var(--orl-dark)) 350deg,
      transparent 360deg
    );
    filter: blur(var(--orl-blur));
    animation: orl-spin var(--orl-spin) linear infinite;
  }
  .orl-button:active .orl-wedge {
    animation-duration: var(--orl-spin-fast);
  }
  @keyframes orl-spin {
    from {
      transform: rotate(0deg) scaleX(1.5);
    }
    to {
      transform: rotate(360deg) scaleX(1.5);
    }
  }
  .orl-face {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 10rem;
    white-space: nowrap;
    padding: 0.875rem 1.75rem;
    border-radius: 9999px;
    background: linear-gradient(to bottom, #050506 0%, #16181d 100%);
    color: #fff;
    font: 500 16px/1.2 system-ui, -apple-system, sans-serif;
  }
  @media (prefers-reduced-motion: reduce) {
    .orl-button {
      transition: none;
    }
    .orl-button:active {
      transform: translateY(-1px);
    }
    .orl-wedge {
      animation: none;
      transform: rotate(0deg) scaleX(1.4);
      background: conic-gradient(from 0deg, rgb(var(--orl-dark)), rgb(var(--orl-mid)), rgb(var(--orl-light)), rgb(var(--orl-mid)), rgb(var(--orl-dark)));
    }
  }
</style>

23:Tf99, Orbiting rim light button 24:Tcba9,

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Orbiting rim light button</title>
    <style>
      body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 2.5rem;
        background: #0b0d10;
        font-family: system-ui, sans-serif;
      }
      .orl-button {
        --orl-mid: 124 92 255;
        --orl-light: 187 168 255;
        --orl-dark: 79 56 163;
        --orl-spin: 5s;
        --orl-spin-fast: 2s;
        --orl-blur: 4px;
        --orl-halo: 8px;
        --orl-focus: 5px;
        position: relative;
        display: inline-block;
        padding: 1px;
        border: 0;
        background: transparent;
        border-radius: 9999px;
        cursor: pointer;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        transform: translateY(0);
        transition: transform 0.5s ease;
      }
      .orl-button:hover {
        transform: translateY(-1px);
      }
      .orl-button:focus-visible {
        outline: 2px solid rgb(var(--orl-light));
        outline-offset: var(--orl-focus);
      }
      .orl-halo {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        box-shadow:
          0 0 calc(var(--orl-halo) * 0.5) calc(var(--orl-halo) * 0.12) rgb(var(--orl-mid) / 0.32),
          0 0 calc(var(--orl-halo) * 1.3) calc(var(--orl-halo) * 0.35) rgb(var(--orl-mid) / 0.14);
      }
      .orl-wedge {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: conic-gradient(
          from 0deg,
          transparent 0deg,
          transparent 195deg,
          rgb(var(--orl-dark)) 235deg,
          rgb(var(--orl-mid)) 270deg,
          rgb(var(--orl-light)) 292deg,
          rgb(var(--orl-mid)) 314deg,
          rgb(var(--orl-dark)) 350deg,
          transparent 360deg
        );
        filter: blur(var(--orl-blur));
        animation: orl-spin var(--orl-spin) linear infinite;
      }
      .orl-button:active .orl-wedge {
        animation-duration: var(--orl-spin-fast);
      }
      @keyframes orl-spin {
        from {
          transform: rotate(0deg) scaleX(1.5);
        }
        to {
          transform: rotate(360deg) scaleX(1.5);
        }
      }
      .orl-face {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 10rem;
        white-space: nowrap;
        padding: 0.875rem 1.75rem;
        border-radius: 9999px;
        background: linear-gradient(to bottom, #050506 0%, #16181d 100%);
        color: #fff;
        font: 500 16px/1.2 system-ui, -apple-system, sans-serif;
      }
      @media (prefers-reduced-motion: reduce) {
        .orl-button {
          transition: none;
        }
        .orl-button:active {
          transform: translateY(-1px);
        }
        .orl-wedge {
          animation: none;
          transform: rotate(0deg) scaleX(1.4);
          background: conic-gradient(from 0deg, rgb(var(--orl-dark)), rgb(var(--orl-mid)), rgb(var(--orl-light)), rgb(var(--orl-mid)), rgb(var(--orl-dark)));
        }
      }
    </style>
  </head>
  <body>
    <button type="button" class="orl-button">
      <span aria-hidden="true" class="orl-halo"></span>
      <span aria-hidden="true" class="orl-wedge"></span>
      <span class="orl-face">Open console</span>
    </button>
    <button
      type="button"
      class="orl-button"
      style="--orl-mid: 245 197 66; --orl-light: 249 221 145; --orl-dark: 157 126 42; --orl-focus: 5px"
    >
      <span aria-hidden="true" class="orl-halo"></span>
      <span aria-hidden="true" class="orl-wedge"></span>
      <span class="orl-face">Deploy build</span>
    </button>
  </body>
</html>

Nearby