Buttons
Magnetic CTA Button
Крупная CTA с эффектом притяжения: на наведении поднимается, свечение разрастается, по поверхности проходит блик. Самодостаточна: один файл, без зависимостей.
- button
- cta
- gradient
- animated
- hero
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «button-003» (Magnetic CTA Button) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Команда установки недоступна: URL реестра VibeUI не сконфигурирован.
Ставится в: components/vibeui/button-003.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Крупная CTA с эффектом притяжения: на наведении поднимается, свечение разрастается, по поверхности проходит блик. Самодостаточна: один файл, без зависимостей.
Крупная градиентная CTA-пилюля. На наведении приподнимается и слегка увеличивается, тень под ней разрастается, а по поверхности слева направо проходит светлый блик; стрелка уезжает вперёд. Всё на CSS-переходах, ноль зависимостей, один файл.
## 3. Как использовать
import { Button003 } from "@/components/vibeui/button-003"
<Button003 onClick={startTrial}>Начать бесплатно</Button003>
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- подъём, увеличение и разрастание тени на наведении — вместе они и дают эффект притяжения, по отдельности не работают
- блик через ::after с translateX и длинным easing — не заменять на opacity-мигание
- градиент из двух переменных accent и accent-2, а не плоскую заливку
- радиус 9999px и крупные метрики: это герой-CTA, а не рядовая кнопка
- cubic-bezier(0.16,1,0.3,1) у переходов — на линейном easing притяжение читается как дёрганье
- правило prefers-reduced-motion, которое гасит и transform, и блик
## 6. Можно менять
- подпись кнопки
- обработчик onClick
- акцентные цвета — пропы accent и accentForeground
- внешние отступы через className
## 7. Правила
- Не добавляй motion-библиотеки: вся анимация уже на CSS.
- Не ставь эту кнопку в плотный ряд управления — она рассчитана на одну главную CTA на экране.
- Не выноси CSS-переменные в globals.css: компонент должен оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
Команда установки недоступна: переменная окруженияREGISTRY_BASE_URL
Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-button-003-*. Эффект целиком на CSS: ни JS, ни отслеживания курсора, поэтому компонент остаётся серверным. Градиент собирается из двух переменных accent и accent-2.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Button003Props = ComponentPropsWithoutRef<"button"> & {
accent?: string
accentForeground?: string
}
// Идея компонента: крупная CTA, которая «притягивает» курсор — на наведении
// она приподнимается, свечение под ней разрастается, а по поверхности
// проходит блик. Эффект целиком на CSS: ни JS, ни отслеживания курсора,
// поэтому компонент остаётся серверным и ничего не тянет в бандл.
const STYLES = `
:where([data-vibeui-block="button-003"]){
--vibeui-button-003-accent:oklch(0.68 0.19 32);
--vibeui-button-003-accent-2:oklch(0.6 0.21 12);
--vibeui-button-003-fg:oklch(0.99 0.004 32);
--vibeui-button-003-glow:color-mix(in oklab, var(--vibeui-button-003-accent) 55%, transparent);
--vibeui-button-003-ring:color-mix(in oklab, var(--vibeui-button-003-accent) 75%, transparent);
--vibeui-button-003-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="button-003"]{
position:relative;isolation:isolate;overflow:hidden;appearance:none;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:0.5em;
height:3.25rem;padding:0 2rem;border:0;border-radius:9999px;
font-family:var(--vibeui-button-003-font);font-size:1rem;font-weight:600;line-height:1;
letter-spacing:-0.01em;color:var(--vibeui-button-003-fg);
background:linear-gradient(135deg,var(--vibeui-button-003-accent),var(--vibeui-button-003-accent-2));
box-shadow:0 6px 18px -8px var(--vibeui-button-003-glow);
transition:transform .28s cubic-bezier(0.16,1,0.3,1),box-shadow .28s cubic-bezier(0.16,1,0.3,1);
}
[data-vibeui-block="button-003"]::after{
content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
background:linear-gradient(100deg,transparent 35%,oklch(1 0 0 / 34%) 50%,transparent 65%);
transform:translateX(-120%);transition:transform .65s cubic-bezier(0.16,1,0.3,1);
}
[data-vibeui-block="button-003"]:hover:not(:disabled){transform:translateY(-2px) scale(1.02);box-shadow:0 16px 38px -12px var(--vibeui-button-003-glow)}
[data-vibeui-block="button-003"]:hover:not(:disabled)::after{transform:translateX(120%)}
[data-vibeui-block="button-003"]:active:not(:disabled){transform:translateY(0) scale(0.99)}
[data-vibeui-block="button-003"]:focus-visible{outline:2px solid var(--vibeui-button-003-ring);outline-offset:3px}
[data-vibeui-block="button-003"]:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}
[data-vibeui-block="button-003"] svg{width:1em;height:1em;transition:transform .28s cubic-bezier(0.16,1,0.3,1)}
[data-vibeui-block="button-003"]:hover:not(:disabled) svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="button-003"],[data-vibeui-block="button-003"]::after,[data-vibeui-block="button-003"] svg{animation:none!important;transition:none!important;transform:none!important}}
`
/**
* Крупная CTA с эффектом притяжения: подъём, разрастающееся свечение и блик
* по поверхности. Один файл, ноль зависимостей, собственная палитра.
*/
export function Button003({
accent,
accentForeground,
type = "button",
className,
style,
children = "Начать бесплатно",
...props
}: Button003Props) {
const palette = {
...(accent ? { "--vibeui-button-003-accent": accent } : null),
...(accentForeground
? { "--vibeui-button-003-fg": accentForeground }
: null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-button-003" precedence="medium">
{STYLES}
</style>
<button
{...props}
type={type}
data-vibeui-block="button-003"
className={className}
style={palette}
>
{children}
<svg viewBox="0 0 14 12" fill="none" aria-hidden="true">
<path
d="M1 6h11M8 2l4 4-4 4"
stroke="currentColor"
strokeWidth="1.75"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</button>
</>
)
}