Buttons
Deep Press Button
Настоящий ход клавиши: объём даёт жёсткая нижняя грань, а при нажатии кнопка опускается ровно на её высоту, не сдвигая соседей.
- button
- press
- 3d
- tactile
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/button-045
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «button-045» (Deep Press Button) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/button-045.json
Registry item: https://vibeui.ru/r/button-045.json
Ставится в: components/vibeui/button-045.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Настоящий ход клавиши: объём даёт жёсткая нижняя грань, а при нажатии кнопка опускается ровно на её высоту, не сдвигая соседей.
Кнопка с настоящим ходом. Под ней лежит жёсткая грань без размытия — это не тень, а торец клавиши; сверху идёт светлый inset-блик, дающий пластик. На нажатии грань уходит, а кнопка опускается на её высоту: сумма высот постоянна, поэтому соседние элементы не смещаются. Ноль зависимостей, один файл.
## 3. Как использовать
import { Button045 } from "@/components/vibeui/button-045"
<Button045 depth={5} onClick={submit}>Нажми меня</Button045>
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- равенство хода и высоты грани: если они разойдутся, кнопка при нажатии начнёт двигать соседей
- нижнюю грань без размытия — размытая тень даёт парение, а не торец клавиши
- внутренний блик сверху: без него пластик выглядит плоской заливкой
- короткий переход .08s: длинная анимация нажатия ощущается как задержка отклика
- переменную depth как единственный источник глубины — её же использует сдвиг
- потемневшую грань относительно лицевой поверхности: одинаковый цвет убивает объём
## 6. Можно менять
- подпись кнопки
- глубину хода — проп depth в пикселях
- цвет лицевой поверхности — проп accent
- обработчик onClick и остальные нативные пропсы button
- цвет торца — переменная --vibeui-button-045-edge в блоке стилей
## 7. Правила
- Не задавай depth больше 10px: кнопка начинает выглядеть как коробка, а ход становится заметно медленным.
- Не забывай про нижний отступ у соседей: грань занимает место, и вплотную поставленный элемент её перекроет.
- Не меняй цвет торца на прозрачный — исчезнет объём, ради которого компонент и сделан.
- Не выноси CSS-переменные в globals.css: компонент должен оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/button-045.jsonhttps://vibeui.ru/r/button-045.jsonКомпонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-button-045-*. Серверный компонент. Объём даёт box-shadow без размытия высотой --vibeui-button-045-depth (проп depth в пикселях); на :active грань обнуляется, а кнопка сдвигается вниз ровно на ту же величину, поэтому суммарная высота пятна постоянна и ряд кнопок не дёргается. Внутренний блик сверху — второй inset-слой той же тени.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Button045Props = ComponentPropsWithoutRef<"button"> & {
/** Высота нижней грани в пикселях: глубина хода клавиши. */
depth?: number
accent?: string
}
// Идея компонента: настоящий ход клавиши. Объём даёт не размытая тень,
// а жёсткая нижняя грань box-shadow без блюра; на :active кнопка опускается
// ровно на её высоту, а грань исчезает — сумма высот постоянна, поэтому
// соседи в ряду не дёргаются. Внутренний блик сверху добавляет пластик.
const STYLES = `
:where([data-vibeui-block="button-045"]){
--vibeui-button-045-depth:5px;
--vibeui-button-045-accent:oklch(0.62 0.19 55);
--vibeui-button-045-edge:oklch(0.44 0.15 55);
--vibeui-button-045-fg:oklch(0.99 0.02 55);
--vibeui-button-045-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="button-045"]{
appearance:none;border:0;cursor:pointer;box-sizing:border-box;
display:inline-flex;align-items:center;gap:0.5rem;
height:2.75rem;padding:0 1.25rem;border-radius:0.75rem;
background:var(--vibeui-button-045-accent);color:var(--vibeui-button-045-fg);
font-family:var(--vibeui-button-045-font);font-size:0.9375rem;font-weight:700;line-height:1;
box-shadow:
0 var(--vibeui-button-045-depth) 0 0 var(--vibeui-button-045-edge),
inset 0 1px 0 0 oklch(1 0 0 / 28%);
transform:translateY(0);
transition:transform .08s ease,box-shadow .08s ease,filter .16s ease;
}
[data-vibeui-block="button-045"]:hover:not(:disabled){filter:brightness(1.05)}
/* Ход клавиши: смещение равно исчезнувшей грани, общая высота не меняется. */
[data-vibeui-block="button-045"]:active:not(:disabled){
transform:translateY(var(--vibeui-button-045-depth));
box-shadow:0 0 0 0 var(--vibeui-button-045-edge),inset 0 1px 0 0 oklch(1 0 0 / 18%);
}
[data-vibeui-block="button-045"]:focus-visible{outline:2px solid var(--vibeui-button-045-edge);outline-offset:3px}
[data-vibeui-block="button-045"]:disabled{cursor:not-allowed;opacity:.55}
[data-vibeui-block="button-045"] [data-part="key"]{
flex:none;width:0.875rem;height:0.875rem;border-radius:0.25rem;
background:oklch(1 0 0 / 30%);box-shadow:inset 0 -1.5px 0 0 oklch(0 0 0 / 18%);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="button-045"]{transition:none!important}}
`
/**
* Кнопка с эффектом нажатия: жёсткая нижняя грань и настоящий ход клавиши.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Button045({
depth = 5,
accent,
type = "button",
className,
style,
children = "Нажми меня",
...props
}: Button045Props) {
const palette = {
"--vibeui-button-045-depth": `${depth}px`,
...(accent ? { "--vibeui-button-045-accent": accent } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-button-045" precedence="medium">
{STYLES}
</style>
<button
{...props}
type={type}
data-vibeui-block="button-045"
className={className}
style={palette}
>
<span data-part="key" aria-hidden="true" />
{children}
</button>
</>
)
}