1f:Td4e3,

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

const props = withDefaults(
  defineProps<{
    accent?: string;
    lift?: number;
    tint?: number;
    size?: number;
    radius?: number;
    label?: string;
  }>(),
  { accent: "#9BE15D", lift: 6, tint: 0.07, size: 44, radius: 5, label: "Download" },
);

const hovered = ref(false);
const focused = ref(false);
const pressed = ref(false);
const lifted = computed(() => hovered.value || focused.value);

const mark = computed(() => Math.max(14, Math.round(props.size - 20)));

const vars = computed(() => ({
  "--slab-accent": props.accent,
  "--slab-lift": props.lift + "px",
  "--slab-tint": String(props.tint),
  "--slab-size": props.size + "px",
  "--slab-radius": props.radius + "px",
}));

function enter() {
  hovered.value = true;
}
function leave() {
  hovered.value = false;
  pressed.value = false;
}
function down() {
  pressed.value = true;
}
function release() {
  pressed.value = false;
}
function onFocus(event: FocusEvent) {
  focused.value = (event.currentTarget as HTMLElement).matches(":focus-visible");
}
function onBlur() {
  focused.value = false;
  pressed.value = false;
}
function onKeyDown(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") pressed.value = true;
}
function onKeyUp(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") pressed.value = false;
}
</script>

<template>
  <span class="slab-lift" :style="vars">
    <button
      type="button"
      class="slab-lift__button"
      :class="{ 'is-lifted': lifted, 'is-focused': focused, 'is-pressed': pressed }"
      :aria-label="label"
      @pointerenter="enter"
      @pointerleave="leave"
      @pointerdown="down"
      @pointerup="release"
      @pointercancel="release"
      @focus="onFocus"
      @blur="onBlur"
      @keydown="onKeyDown"
      @keyup="onKeyUp"
    >
      <svg class="slab-lift__mark" :width="mark" :height="mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <rect x="11" y="3" width="2" height="8.5" rx="0.75" />
        <path d="M12 17.6 7.55 12.2c-.31-.38-.04-.95.45-.95h8c.49 0 .76.57.45.95L12 17.6Z" />
        <path d="M4.5 15.5c0-.28.22-.5.5-.5H7v2.5h10V15h2c.28 0 .5.22.5.5v2.75A2.75 2.75 0 0 1 16.75 21H7.25A2.75 2.75 0 0 1 4.5 18.25V15.5Z" />
      </svg>
    </button>
    <span aria-hidden="true" class="slab-lift__slab" />
  </span>
</template>

<style scoped>
.slab-lift {
  position: relative;
  display: inline-flex;
}
.slab-lift__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--slab-size);
  height: var(--slab-size);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--slab-radius);
  background: rgba(255, 255, 255, var(--slab-tint, 0.07));
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  outline: none;
  user-select: none;
  transition:
    transform 130ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}
.slab-lift__button.is-lifted {
  border-color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.4));
  transform: translateY(calc(var(--slab-lift) * -1));
}
.slab-lift__button.is-focused {
  box-shadow: 0 0 0 2px var(--slab-accent);
}
.slab-lift__button.is-pressed {
  transform: translateY(2px);
}
.slab-lift__mark {
  display: block;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.35));
}
.slab-lift__slab {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--slab-lift);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.slab-lift__button.is-lifted + .slab-lift__slab {
  opacity: 1;
}
.slab-lift__button.is-pressed + .slab-lift__slab {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .slab-lift__button {
    transition:
      background 140ms ease,
      border-color 140ms ease,
      box-shadow 140ms ease;
  }
  .slab-lift__button.is-lifted,
  .slab-lift__button.is-pressed {
    transform: none;
  }
}
</style>

20:Tfcb, 21:Te276,

<script lang="ts">
  let {
    accent = "#9BE15D",
    lift = 6,
    tint = 0.07,
    size = 44,
    radius = 5,
    label = "Download",
  }: { accent?: string; lift?: number; tint?: number; size?: number; radius?: number; label?: string } = $props();

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

  const lifted = $derived(hovered || focused);
  const mark = $derived(Math.max(14, Math.round(size - 20)));

  function enter() {
    hovered = true;
  }
  function leave() {
    hovered = false;
    pressed = false;
  }
  function down() {
    pressed = true;
  }
  function release() {
    pressed = false;
  }
  function focusVisible(event: FocusEvent) {
    focused = (event.currentTarget as HTMLElement).matches(":focus-visible");
  }
  function blurOut() {
    focused = false;
    pressed = false;
  }
  function keyDown(event: KeyboardEvent) {
    if (event.key === " " || event.key === "Enter") pressed = true;
  }
  function keyUp(event: KeyboardEvent) {
    if (event.key === " " || event.key === "Enter") pressed = false;
  }
</script>

<span
  class="slab-lift"
  style:--slab-accent={accent}
  style:--slab-lift="{lift}px"
  style:--slab-tint={tint}
  style:--slab-size="{size}px"
  style:--slab-radius="{radius}px"
>
  <button
    type="button"
    class="slab-lift__button"
    class:is-lifted={lifted}
    class:is-focused={focused}
    class:is-pressed={pressed}
    aria-label={label}
    onpointerenter={enter}
    onpointerleave={leave}
    onpointerdown={down}
    onpointerup={release}
    onpointercancel={release}
    onfocus={focusVisible}
    onblur={blurOut}
    onkeydown={keyDown}
    onkeyup={keyUp}
  >
    <svg class="slab-lift__mark" width={mark} height={mark} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <rect x="11" y="3" width="2" height="8.5" rx="0.75" />
      <path d="M12 17.6 7.55 12.2c-.31-.38-.04-.95.45-.95h8c.49 0 .76.57.45.95L12 17.6Z" />
      <path d="M4.5 15.5c0-.28.22-.5.5-.5H7v2.5h10V15h2c.28 0 .5.22.5.5v2.75A2.75 2.75 0 0 1 16.75 21H7.25A2.75 2.75 0 0 1 4.5 18.25V15.5Z" />
    </svg>
  </button>
  <span aria-hidden="true" class="slab-lift__slab"></span>
</span>

<style>
  .slab-lift {
    position: relative;
    display: inline-flex;
  }
  .slab-lift__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--slab-size);
    height: var(--slab-size);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--slab-radius);
    background: rgba(255, 255, 255, var(--slab-tint, 0.07));
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    outline: none;
    user-select: none;
    transition:
      transform 130ms cubic-bezier(0.2, 0.8, 0.2, 1),
      background 140ms ease,
      border-color 140ms ease,
      box-shadow 140ms ease;
  }
  .slab-lift__button.is-lifted {
    border-color: rgba(255, 255, 255, 0.6);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.4));
    transform: translateY(calc(var(--slab-lift) * -1));
  }
  .slab-lift__button.is-focused {
    box-shadow: 0 0 0 2px var(--slab-accent);
  }
  .slab-lift__button.is-pressed {
    transform: translateY(2px);
  }
  .slab-lift__mark {
    display: block;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.35));
  }
  .slab-lift__slab {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--slab-lift);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
  }
  .slab-lift__button.is-lifted + .slab-lift__slab {
    opacity: 1;
  }
  .slab-lift__button.is-pressed + .slab-lift__slab {
    opacity: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .slab-lift__button {
      transition:
        background 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease;
    }
    .slab-lift__button.is-lifted,
    .slab-lift__button.is-pressed {
      transform: none;
    }
  }
</style>

Nearby