Slide under download button

23:Te4a8,

---
interface Props {
  label?: string;
  accent?: string;
  direction?: "below" | "above";
  duration?: number;
  bobbing?: boolean;
}
const { label = "Docs", accent = "#9BE15D", direction = "below", duration = 0.5, bobbing = true } = Astro.props;
---

<button
  type="button"
  class:list={["sub-button", { "sub-button--above": direction === "above" }, { "is-bobbing": bobbing }]}
  style={`--accent: ${accent}; --dur: ${duration}s`}
  data-slide-under
>
  <span class="sub-tray" aria-hidden="true">
    <svg class="sub-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 4.5v10" />
      <path d="M7.5 10.5 12 15l4.5-4.5" />
      <path d="M5.5 19.5h13" />
    </svg>
  </span>
  <span class="sub-plate">
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M6.5 3.5h7l4 4v13h-11z" />
      <path d="M13.5 3.5v4h4" />
      <path d="M9.5 12.5h5M9.5 16h5" />
    </svg>
    <span>{label}</span>
  </span>
</button>

<style>
  .sub-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease;
  }
  .sub-button:active {
    transform: translateY(1px);
  }
  .sub-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgb(255 255 255 / 0.25);
  }
  .sub-plate {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 40px;
    padding: 0 1rem;
    border: 1px solid rgb(255 255 255 / 0.15);
    border-radius: 6px;
    background: #20262e;
    color: #fff;
    font: 600 13px/1 system-ui, sans-serif;
    letter-spacing: 0.01em;
  }
  .sub-tray {
    position: absolute;
    left: 3px;
    right: 3px;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--accent);
    color: #10141b;
    pointer-events: none;
    transform: translateY(0);
    transition: transform var(--dur) cubic-bezier(0.45, 0, 0.25, 1);
  }
  .sub-button--above .sub-tray {
    top: auto;
  }
  .sub-button:hover .sub-tray,
  .sub-button:focus-visible .sub-tray,
  .sub-button.is-revealed .sub-tray {
    transform: translateY(100%);
  }
  .sub-button--above:hover .sub-tray,
  .sub-button--above:focus-visible .sub-tray,
  .sub-button--above.is-revealed .sub-tray {
    transform: translateY(-100%);
  }
  .sub-button.is-bobbing .sub-arrow {
    animation: sub-bob 1.15s ease-in-out infinite;
    animation-play-state: paused;
  }
  .sub-button.is-bobbing:hover .sub-arrow,
  .sub-button.is-bobbing:focus-visible .sub-arrow,
  .sub-button.is-bobbing.is-revealed .sub-arrow {
    animation-play-state: running;
  }
  .sub-button.is-pressed .sub-arrow {
    animation: none;
    transform: translateY(-4px);
  }
  @keyframes sub-bob {
    0%,
    100% {
      transform: translateY(0);
    }
    45%,
    55% {
      transform: translateY(-4px);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sub-button:hover,
    .sub-button:active {
      transform: none;
    }
    .sub-tray {
      transform: none !important;
      opacity: 0;
      transition: opacity var(--dur) ease;
    }
    .sub-button:hover .sub-tray,
    .sub-button:focus-visible .sub-tray,
    .sub-button.is-revealed .sub-tray {
      opacity: 1;
    }
    .sub-button.is-bobbing .sub-arrow,
    .sub-button.is-pressed .sub-arrow {
      animation: none;
      transform: none;
    }
  }
</style>

<script>
  function attach(button: HTMLButtonElement) {
    button.addEventListener("pointerdown", (event) => {
      button.classList.add("is-pressed");
      if (event.pointerType === "touch") button.classList.add("is-revealed");
    });
    for (const type of ["pointerup", "pointercancel", "pointerleave"]) {
      button.addEventListener(type, () => button.classList.remove("is-pressed"));
    }
    button.addEventListener("click", (event) => {
      const pointer = event as PointerEvent;
      if (pointer.pointerType === "touch") button.classList.add("is-revealed");
    });
    button.addEventListener("blur", () => {
      button.classList.remove("is-revealed", "is-pressed");
    });
  }
  document.querySelectorAll<HTMLButtonElement>("[data-slide-under]").forEach(attach);
</script>

24:T18fc, Slide under download button

25:T11787,

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Slide under download button</title>
    <style>
      body {
        margin: 0;
        min-height: 100vh;
        display: grid;
        place-items: center;
        background: #0b0d10;
        font-family: system-ui, sans-serif;
      }
      .sub-button {
        position: relative;
        isolation: isolate;
        display: inline-flex;
        padding: 0;
        border: none;
        border-radius: 7px;
        background: none;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        transition: transform 120ms ease;
      }
      .sub-button:active {
        transform: translateY(1px);
      }
      .sub-button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgb(255 255 255 / 0.25);
      }
      .sub-plate {
        position: relative;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        height: 40px;
        padding: 0 1rem;
        border: 1px solid rgb(255 255 255 / 0.15);
        border-radius: 6px;
        background: #20262e;
        color: #fff;
        font: 600 13px/1 system-ui, sans-serif;
        letter-spacing: 0.01em;
      }
      .sub-tray {
        position: absolute;
        left: 3px;
        right: 3px;
        top: 0;
        bottom: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        background: var(--accent);
        color: #10141b;
        pointer-events: none;
        transform: translateY(0);
        transition: transform var(--dur) cubic-bezier(0.45, 0, 0.25, 1);
      }
      .sub-button--above .sub-tray {
        top: auto;
      }
      .sub-button:hover .sub-tray,
      .sub-button:focus-visible .sub-tray,
      .sub-button.is-revealed .sub-tray {
        transform: translateY(100%);
      }
      .sub-button--above:hover .sub-tray,
      .sub-button--above:focus-visible .sub-tray,
      .sub-button--above.is-revealed .sub-tray {
        transform: translateY(-100%);
      }
      .sub-button.is-bobbing .sub-arrow {
        animation: sub-bob 1.15s ease-in-out infinite;
        animation-play-state: paused;
      }
      .sub-button.is-bobbing:hover .sub-arrow,
      .sub-button.is-bobbing:focus-visible .sub-arrow,
      .sub-button.is-bobbing.is-revealed .sub-arrow {
        animation-play-state: running;
      }
      .sub-button.is-pressed .sub-arrow {
        animation: none;
        transform: translateY(-4px);
      }
      @keyframes sub-bob {
        0%,
        100% {
          transform: translateY(0);
        }
        45%,
        55% {
          transform: translateY(-4px);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .sub-button:hover,
        .sub-button:active {
          transform: none;
        }
        .sub-tray {
          transform: none !important;
          opacity: 0;
          transition: opacity var(--dur) ease;
        }
        .sub-button:hover .sub-tray,
        .sub-button:focus-visible .sub-tray,
        .sub-button.is-revealed .sub-tray {
          opacity: 1;
        }
        .sub-button.is-bobbing .sub-arrow,
        .sub-button.is-pressed .sub-arrow {
          animation: none;
          transform: none;
        }
      }
    </style>
  </head>
  <body>
    <div style="display: flex; gap: 2.5rem; flex-wrap: wrap; align-items: center; justify-content: center">
      <button type="button" class="sub-button is-bobbing" data-slide-under style="--accent: #9be15d; --dur: 0.5s">
        <span class="sub-tray" aria-hidden="true">
          <svg class="sub-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 4.5v10"></path>
            <path d="M7.5 10.5 12 15l4.5-4.5"></path>
            <path d="M5.5 19.5h13"></path>
          </svg>
        </span>
        <span class="sub-plate">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M6.5 3.5h7l4 4v13h-11z"></path>
            <path d="M13.5 3.5v4h4"></path>
            <path d="M9.5 12.5h5M9.5 16h5"></path>
          </svg>
          <span>Docs</span>
        </span>
      </button>
      <button type="button" class="sub-button sub-button--above is-bobbing" data-slide-under style="--accent: #38bdf8; --dur: 0.5s">
        <span class="sub-tray" aria-hidden="true">
          <svg class="sub-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 4.5v10"></path>
            <path d="M7.5 10.5 12 15l4.5-4.5"></path>
            <path d="M5.5 19.5h13"></path>
          </svg>
        </span>
        <span class="sub-plate">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M6.5 3.5h7l4 4v13h-11z"></path>
            <path d="M13.5 3.5v4h4"></path>
            <path d="M9.5 12.5h5M9.5 16h5"></path>
          </svg>
          <span>Invoice</span>
        </span>
      </button>
    </div>
    <script>
      document.querySelectorAll("[data-slide-under]").forEach(function (button) {
        button.addEventListener("pointerdown", function (event) {
          button.classList.add("is-pressed");
          if (event.pointerType === "touch") button.classList.add("is-revealed");
        });
        ["pointerup", "pointercancel", "pointerleave"].forEach(function (type) {
          button.addEventListener(type, function () {
            button.classList.remove("is-pressed");
          });
        });
        button.addEventListener("click", function (event) {
          if (event.pointerType === "touch") button.classList.add("is-revealed");
        });
        button.addEventListener("blur", function () {
          button.classList.remove("is-revealed", "is-pressed");
        });
      });
    </script>
  </body>
</html>

Nearby