VibeUI

Buttons

Lift Shadow Button

Кнопка, которая отрывается от поверхности: три слоя тени растут и размываются вместе с подъёмом, а нажатие возвращает её на стол.

  • button
  • shadow
  • hover
  • elevation

Превью

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/button-043

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «button-043» (Lift Shadow Button) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/button-043.json

Registry item: https://vibeui.ru/r/button-043.json
Ставится в: components/vibeui/button-043.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Кнопка, которая отрывается от поверхности: три слоя тени растут и размываются вместе с подъёмом, а нажатие возвращает её на стол.

Светлая кнопка с физикой подъёма. В покое под ней лежит трёхслойная тень: жёсткий контакт, средний ореол и дальнее размытие. На наведении кнопка уезжает вверх, а дальние слои растут и размываются — предмет оторвался от стола. На нажатии остаётся один контактный слой. Ноль зависимостей, один файл.

## 3. Как использовать
import { Button043 } from "@/components/vibeui/button-043"

<Button043 lift={6} onClick={openCard}>Открыть карточку</Button043>

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- три слоя тени: один размытый слой читается как ореол, а не как высота
- контактный слой без размытия — он держит связь предмета с поверхностью на любой высоте
- одновременный рост смещения и размытия: тень, которая только сдвигается, выглядит нарисованной
- возврат на :active с единственной контактной тенью — это и есть нажатие
- cubic-bezier(0.16,1,0.3,1): на линейном easing подъём читается как рывок
- светлую поверхность кнопки — тень строится на контрасте с ней, а тёмный текст остаётся читаемым

## 6. Можно менять
- подпись кнопки
- высоту подъёма — проп lift в пикселях
- акцентный цвет значка — проп accent
- обработчик onClick и остальные нативные пропсы button
- цвет тени — переменная --vibeui-button-043-shadow в блоке стилей

## 7. Правила
- Не ставь такие кнопки плотным рядом: подъём соседних элементов создаёт визуальный шум.
- Не задавай lift больше 12px — на большей высоте тень отрывается от кнопки и выглядит чужой.
- Не заменяй трёхслойную тень одним box-shadow ради краткости: пропадёт ощущение высоты.
- Не выноси CSS-переменные в globals.css: компонент должен оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/button-043.json
https://vibeui.ru/r/button-043.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-button-043-*. Серверный компонент, корень — сам <button>. Тень собрана из трёх слоёв: контактного без размытия, среднего и дальнего; на наведении меняются смещение и размытие двух дальних, контактный остаётся. Высота подъёма вынесена в переменную --vibeui-button-043-lift и задаётся пропом lift в пикселях. Переходы идут на cubic-bezier(0.16,1,0.3,1).

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Button043Props = ComponentPropsWithoutRef<"button"> & {
  /** Высота подъёма на наведении в пикселях. */
  lift?: number
  accent?: string
}

// Идея компонента: физика подъёма. Тень собрана из трёх слоёв — контактной,
// средней и дальней; на наведении кнопка уезжает вверх, а тени одновременно
// растут и размываются, как у предмета, оторвавшегося от стола. На :active
// подъём обнуляется и остаётся только контактная тень — предмет прижали.
const STYLES = `
:where([data-vibeui-block="button-043"]){
--vibeui-button-043-lift:6px;
--vibeui-button-043-surface:oklch(1 0 0);
--vibeui-button-043-border:oklch(0.9 0.006 265);
--vibeui-button-043-fg:oklch(0.24 0.02 265);
--vibeui-button-043-accent:oklch(0.58 0.16 45);
--vibeui-button-043-shadow:oklch(0.3 0.03 265 / 22%);
--vibeui-button-043-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="button-043"]{
appearance:none;cursor:pointer;box-sizing:border-box;
display:inline-flex;align-items:center;gap:0.5rem;
height:2.75rem;padding:0 1.125rem;border-radius:0.75rem;
border:1px solid var(--vibeui-button-043-border);
background:var(--vibeui-button-043-surface);color:var(--vibeui-button-043-fg);
font-family:var(--vibeui-button-043-font);font-size:0.875rem;font-weight:650;line-height:1;
box-shadow:
0 1px 1px var(--vibeui-button-043-shadow),
0 2px 4px -2px var(--vibeui-button-043-shadow),
0 4px 10px -6px var(--vibeui-button-043-shadow);
transition:transform .2s cubic-bezier(0.16,1,0.3,1),box-shadow .2s cubic-bezier(0.16,1,0.3,1);
}
[data-vibeui-block="button-043"]:hover:not(:disabled){
transform:translateY(calc(-1 * var(--vibeui-button-043-lift)));
box-shadow:
0 1px 1px var(--vibeui-button-043-shadow),
0 8px 14px -8px var(--vibeui-button-043-shadow),
0 20px 34px -18px var(--vibeui-button-043-shadow);
}
/* Нажатие возвращает предмет на стол: остаётся только контактная тень. */
[data-vibeui-block="button-043"]:active:not(:disabled){
transform:translateY(1px);
box-shadow:0 1px 1px var(--vibeui-button-043-shadow);
}
[data-vibeui-block="button-043"]:focus-visible{outline:2px solid var(--vibeui-button-043-accent);outline-offset:3px}
[data-vibeui-block="button-043"]:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}
[data-vibeui-block="button-043"] [data-part="chip"]{
flex:none;width:1.375rem;height:1.375rem;border-radius:0.4375rem;
background:color-mix(in oklab,var(--vibeui-button-043-accent) 18%,transparent);
position:relative;
}
[data-vibeui-block="button-043"] [data-part="chip"]::after{
content:"";position:absolute;left:50%;top:50%;width:0.5rem;height:0.5rem;
margin:-0.25rem 0 0 -0.25rem;border-radius:2px;
background:var(--vibeui-button-043-accent);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="button-043"]{transition:none!important}}
`

/**
 * Кнопка с тенью-подъёмом: на наведении отрывается от поверхности.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Button043({
  lift = 6,
  accent,
  type = "button",
  className,
  style,
  children = "Открыть карточку",
  ...props
}: Button043Props) {
  const palette = {
    "--vibeui-button-043-lift": `${lift}px`,
    ...(accent ? { "--vibeui-button-043-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-button-043" precedence="medium">
        {STYLES}
      </style>
      <button
        {...props}
        type={type}
        data-vibeui-block="button-043"
        className={className}
        style={palette}
      >
        <span data-part="chip" aria-hidden="true" />
        {children}
      </button>
    </>
  )
}