<script setup lang="ts">
import { computed, ref } from "vue";

const props = withDefaults(
  defineProps<{
    accent?: string;
    liftHeight?: number;
    radius?: number;
    springy?: boolean;
  }>(),
  { accent: "#FF4D8D", liftHeight: 4, radius: 12, springy: true },
);

const hovered = ref(false);
const pressed = ref(false);

const reduce =
  typeof window !== "undefined" &&
  typeof window.matchMedia === "function" &&
  window.matchMedia("(prefers-reduced-motion: reduce)").matches;

const faceY = computed(() => {
  if (reduce) return -props.liftHeight;
  if (pressed.value) return -1;
  if (hovered.value) return -(props.liftHeight + 2);
  return -props.liftHeight;
});

const faceTransition = computed(() => {
  if (pressed.value || reduce) return "transform 45ms linear";
  return props.springy
    ? "transform 430ms cubic-bezier(0.3, 1.7, 0.4, 1)"
    : "transform 220ms cubic-bezier(0.3, 0.8, 0.4, 1)";
});

const shadowY = computed(() => (!pressed.value && !reduce && hovered.value ? 1.5 : 0));

const faceFilter = computed(() =>
  pressed.value ? "brightness(0.88)" : hovered.value ? "brightness(1.1)" : "brightness(1)",
);

function enter(event: PointerEvent) {
  if (event.pointerType !== "touch") hovered.value = true;
}
function leave() {
  hovered.value = false;
  pressed.value = false;
}
function down() {
  pressed.value = true;
}
function up() {
  pressed.value = false;
}
function keydown(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") {
    if (event.key === " ") event.preventDefault();
    pressed.value = true;
  }
}
function keyup(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") pressed.value = false;
}
</script>

<template>
  <button
    type="button"
    class="tlp-button"
    :style="{ '--tlp-accent': accent }"
    @pointerenter="enter"
    @pointerleave="leave"
    @pointerdown="down"
    @pointerup="up"
    @pointercancel="up"
    @keydown="keydown"
    @keyup="keyup"
  >
    <span class="tlp-stage" :style="{ filter: faceFilter, transition: 'filter 160ms ease' }">
      <span
        aria-hidden="true"
        class="tlp-shadow"
        :style="{
          borderRadius: radius + 'px',
          transform: 'translateY(' + shadowY + 'px)',
          transition: 'transform 200ms ease',
        }"
      />
      <span aria-hidden="true" class="tlp-wall" :style="{ borderRadius: radius + 'px' }" />
      <span
        class="tlp-face"
        :style="{
          borderRadius: radius + 'px',
          transform: 'translateY(' + faceY + 'px)',
          transition: faceTransition,
        }"
      >
        <slot />
      </span>
    </span>
  </button>
</template>

<style scoped>
.tlp-button {
  position: relative;
  display: inline-flex;
  padding: 12px 0 8px;
  border: 0;
  background: transparent;
  color: #fff;
  font: 500 17px/1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.tlp-button:focus-visible {
  outline: 2px solid var(--tlp-accent);
  outline-offset: 4px;
}
.tlp-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.tlp-stage {
  position: relative;
  display: block;
}
.tlp-shadow {
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  height: 100%;
  background: rgb(0 0 0 / 0.38);
}
.tlp-wall {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--tlp-accent), #000 58%) 0%,
    color-mix(in srgb, var(--tlp-accent), #000 30%) 15%,
    color-mix(in srgb, var(--tlp-accent), #000 30%) 85%,
    color-mix(in srgb, var(--tlp-accent), #000 58%) 100%
  );
}
.tlp-face {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 28px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tlp-accent), #fff 16%) 0%,
    var(--tlp-accent) 52%,
    color-mix(in srgb, var(--tlp-accent), #000 12%) 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  .tlp-face,
  .tlp-shadow {
    transition-duration: 1ms !important;
  }
}
</style>

1f:Tf45, 20:Td22d,

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

  let {
    accent = "#FF4D8D",
    liftHeight = 4,
    radius = 12,
    springy = true,
    children,
  }: { accent?: string; liftHeight?: number; radius?: number; springy?: boolean; children?: Snippet } = $props();

  let hovered = $state(false);
  let pressed = $state(false);

  const reduce =
    typeof window !== "undefined" &&
    typeof window.matchMedia === "function" &&
    window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  const faceY = $derived(
    reduce ? -liftHeight : pressed ? -1 : hovered ? -(liftHeight + 2) : -liftHeight,
  );
  const faceTransition = $derived(
    pressed || reduce
      ? "transform 45ms linear"
      : springy
        ? "transform 430ms cubic-bezier(0.3, 1.7, 0.4, 1)"
        : "transform 220ms cubic-bezier(0.3, 0.8, 0.4, 1)",
  );
  const shadowY = $derived(!pressed && !reduce && hovered ? 1.5 : 0);
  const stageFilter = $derived(
    pressed ? "brightness(0.88)" : hovered ? "brightness(1.1)" : "brightness(1)",
  );

  function enter(event: PointerEvent) {
    if (event.pointerType !== "touch") hovered = true;
  }
  function leave() {
    hovered = false;
    pressed = false;
  }
  function down() {
    pressed = true;
  }
  function up() {
    pressed = false;
  }
  function keydown(event: KeyboardEvent) {
    if (event.key === " " || event.key === "Enter") {
      if (event.key === " ") event.preventDefault();
      pressed = true;
    }
  }
  function keyup(event: KeyboardEvent) {
    if (event.key === " " || event.key === "Enter") pressed = false;
  }
</script>

<button
  type="button"
  class="tlp-button"
  style="--tlp-accent: {accent}"
  onpointerenter={enter}
  onpointerleave={leave}
  onpointerdown={down}
  onpointerup={up}
  onpointercancel={up}
  onkeydown={keydown}
  onkeyup={keyup}
>
  <span class="tlp-stage" style="filter: {stageFilter}; transition: filter 160ms ease">
    <span
      aria-hidden="true"
      class="tlp-shadow"
      style="border-radius: {radius}px; transform: translateY({shadowY}px); transition: transform 200ms ease"
    ></span>
    <span aria-hidden="true" class="tlp-wall" style="border-radius: {radius}px"></span>
    <span
      class="tlp-face"
      style="border-radius: {radius}px; transform: translateY({faceY}px); transition: {faceTransition}"
    >
      {@render children?.()}
    </span>
  </span>
</button>

<style>
  .tlp-button {
    position: relative;
    display: inline-flex;
    padding: 12px 0 8px;
    border: 0;
    background: transparent;
    color: #fff;
    font: 500 17px/1 system-ui, sans-serif;
    cursor: pointer;
    user-select: none;
    outline: none;
  }
  .tlp-button:focus-visible {
    outline: 2px solid var(--tlp-accent);
    outline-offset: 4px;
  }
  .tlp-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }
  .tlp-stage {
    position: relative;
    display: block;
  }
  .tlp-shadow {
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    height: 100%;
    background: rgb(0 0 0 / 0.38);
  }
  .tlp-wall {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--tlp-accent), #000 58%) 0%,
      color-mix(in srgb, var(--tlp-accent), #000 30%) 15%,
      color-mix(in srgb, var(--tlp-accent), #000 30%) 85%,
      color-mix(in srgb, var(--tlp-accent), #000 58%) 100%
    );
  }
  .tlp-face {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 28px;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--tlp-accent), #fff 16%) 0%,
      var(--tlp-accent) 52%,
      color-mix(in srgb, var(--tlp-accent), #000 12%) 100%
    );
  }
  @media (prefers-reduced-motion: reduce) {
    .tlp-face,
    .tlp-shadow {
      transition-duration: 1ms !important;
    }
  }
</style>

Nearby